jQuery drag and drop ist Duplizierung divs

Question

OK, also schnappte ich mir dieses Code-Schnipsel von anderen Fragen und kann für das Leben von mir nicht erinnern, welches, sonst würde ich nur versuchen, diese Frage wieder auferstehen. Dies ist, was ich versuche zu erreichen:

Ich habe verschiedene divs und möchte ich kann sie ziehen und haben sie Positionen zu tauschen, wenn ich also das rote Quadrat und auf dem blauen Platz fallen, werden sie Plätze tauschen (schnappt in ihre Positionen). Ich versuche nur, den wirklich grundlegenden Code jetzt zu arbeiten, und sobald ich das bekomme, werde ich verschiedene Stylesheets implementieren, wenn sie ausgetauscht werden, um den Inhalt und das Aussehen zu ändern.

Das Problem, das ich mit dem aktuellen Code habe, ist, wenn ich drag and drop es an seine ursprüngliche Position zurückfallen und ein doppeltes div nach meinen anderen divs erstellen werde. Hoffe, dass dies Sinn macht, hier ist die jquery:

$(document).ready(function() { 
    src = null; 
    options = { 
     revert:true, 
     /*axis: 'x',*/ 
     opacity: 0.8, 
     start: function() { 
      src = $(this).parent(); 
     } 
    } 

    $(".item").draggable(options); 
    $(".container").droppable({ 
     drop: function(event, ui) { 
      src.append(
       $('.item', this).remove().clone() 
        .removeClass().addClass("item") 
        .css({"left": '', "opacity": '',"top":''}) 
        .draggable(options) 
       ); 

      $(this).append(
       ui.draggable.remove().clone() 
        .removeClass().addClass("item") 
        .css({"left": '', "opacity": '',"top":''}) 
        .draggable(options) 
       ); 
     } 
    }); 

}); 

return this.pushStack(stack); 

Das Markup ist dies:

<div class="container"> 
<div class="item"></div> 
<div class="item"></div> 
<div class="item"></div> 
</div> 

Styling sollte hier nichts, aber wenn es funktioniert, habe ich sie nur auf 100x100px, eine rote, eine Blau und ein Grün.

Answer 1

Hier ist eine Lösung für dieses Problem, ohne Verwendung von Swap-Plugins, nur jQuery UI. Fiddle: http://jsfiddle.net/promatik/YtQRd/

jQuery UI:

$(".item").on("mouseup", function(){ 
    $(this).css("top", "").css("left", ""); 
}); 

$(".item").draggable().droppable({ 
    drop: function(event, ui) { 
     draged = ui.draggable.css("top", "initial").css("left", "initial"); 
     dropped = $(this); 
     var elems = draged.parent().children(); 
     if(elems.index(draged) > elems.index(dropped)) { 
      temp = draged; 
      draged = dropped; 
      dropped = temp; 
     } 
     var nElem = draged.next(); 
     dropped.after(draged); 
     nElem.before(dropped); 
    } 
}); 

Dies wird die Swap der Objekte tun per Drag & Drop.