jQueryのドラッグアンドドロップでdivを複製しています

Question

OK、私はこのコードスニペットを別の質問から掴んで、私の人生の中で何かを覚えていなければ、その質問を復活させようとします。これは私が達成しようとしているものです：

私はさまざまな部門を持っていて、それらをドラッグしてポジションを入れ替えることができるので、もし私が赤い四角形をつかんで、青い四角形の上にドロップすれば、 （それらの位置にスナップする）。私はちょうど今、本当に基本的なコードを取得しようとしていると、一度私は彼らがコンテンツと外観を変更するために交換されたときに別のスタイルシートを実装します。

私が現在のコードで持っている問題は、ドラッグアンドドロップすると元の位置に戻り、他のdivの後にdivを作成することです。これは理にかなって願って、ここに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); 

マークアップはこれです：

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

スタイリングは、ここでは重要でなければならないが、それがなければ、私は100x100pxにそれらを設定し、1つの赤、1青、緑の1つです。

Answer 1

これは、この問題の解決策です。スワッププラグインを使用していますが、jQueryのUIだけです。 フィドル：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); 
    } 
}); 

これは、オブジェクトのスワップを行いますがドラッグ＆ドロップ。