jQuery拖放正在复制div

Question

好的，所以我从另一个问题中获取了这个代码 sn-p 并且我一生都无法记住哪个问题，否则我只会尝试复活那个问题。这就是我想要完成的：

我有各种 div 并且希望我能够拖动它们并让它们交换位置，所以如果我抓住红色方块并放在蓝色方块上，它们将交换位置（捕捉到它们的位置）。我只是想让真正的基本代码现在工作，一旦我得到它，我将在交换它们以更改内容和外观时实现不同的样式表。

当前代码的问题是当我拖放它时，它会回到原来的位置，并在我的其他 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>

样式在这里应该很重要，但如果确实如此，我只需将它们设置为 100x100 像素，一红一蓝一绿。

Answer 1

这是一个解决这个问题的方法，不使用交换插件，只使用 jQuery UI。 小提琴：http://jsfiddle.net/promatik/YtQRd/

jQuery 用户界面：

$(".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);
    }
});

这将交换拖放的对象。