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 & float of swapped elements.

Swapped elements doesn't fit if the className & it's attributes were different. Should i swap the className too OR just swap only certain attributes.

* for better understanding please check my demo*

回答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); 
    }
    ...

});

回答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)

来源：https://stackoverflow.com/questions/5659917/to-swap-elemntswith-classname-too-when-draged-dropped