To Swap Elemnts(with Classname Too) When Draged & Dropped

Swapping two elements whenever one element dragged and dropped over another element. I used Vadim's JQuery plugin and it's working but i have an issue with height,Width,position &a

Solution 1:

in your example elements behave exactly as they should behave based on the css rules you apply to them. You can add or remove classes or recalculate height/width with javascript on stop event:

$("#foo").swappable({
    ...
    stop: function(event, ui) {
        alert("drug: "+ ui.item[0].id + ", drop: "+ event.originalEvent.target.id); 
    }
    ...

});

Solution 2:

usally the iu items have methods that can be passed in the initilice object in your case you can use stop stop is invoked each time ends swap

example:

$(function() {

 $('.row,.column').swappable({
        items:'.class_1,.class_2',
        cursorAt: {top:-20},
      stop: function(event, ui) { alert("hi") }
          });
 $( '.class_1,.class_2' ).addClass( "ui-widget" );

});

instead of alert just add or remove the class you need, probably you can use toogle method

tell me if this is what you are looking for 8)