Question

好的，所以我从另一个问题中抓住了这个代码片段，并且因为我的生命不能记住哪一个，否则我会尝试复活那个问题。这就是我想要实现的目标：

我有各种各样的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>

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

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);
    }
});

这将交换拖放的对象。

jQuery拖放是复制div

1 个答案: