如何使用 Draggable 和 Droppable 交换 2 个项目？

Question

问题

我有 4 张图片。用户可以将它们拖放到另一个列表并更改图像的顺序。目标是用户选择图像的顺序。问题是当它们彼此放置时我无法交换这些图像。

HTML

<ul id="choices">
    <li><img src="http://placehold.it/200x200&text=1" /></li>
    <li><img src="http://placehold.it/200x200&text=2" /></li>
    <li><img src="http://placehold.it/200x200&text=3" /></li>
    <li><img src="http://placehold.it/200x200&text=4" /></li>
</ul>

<ul id="answers">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

jQuery

​​>

(function ($) {

    $("#choices li img").draggable({
        revert: true,
        zIndex: 10,
        snap: "#answers li",
        snapMode: "inner",
        snapTolerance: 40
    });

    $("#answers li").droppable({
        drop: function (event, ui) {
            var dropped = ui.draggable;
            var droppedOn = this;

            if ($(droppedOn).children().length > 0) {
                alert("I need to swap these");
            }

            $(dropped).detach().css({
                top: 0,
                left: 0
            }).prependTo($(droppedOn));
        }
    });
})(jQuery);

CSS（不是很重要）

img {
    display: block;
    z-index: 3;
}
#choices, #answers {
    display:block;
    padding: 0;
    margin: 0;
}
#choices li, #answers li {
    display: inline-block;
    height: 200px;
    width: 200px;
    margin: 10px;
    background: #515151;
}
#answers li {
    position: relative;
}

示例

http://jsfiddle.net/K6QNg/

Answer 1

我的解决方案可能不是最优雅的（也许有人可以提供更直观的东西？），但它似乎有效；）

小提琴：http://jsfiddle.net/W9Z46/14/

(function ($) {
    var lastPlace;

    $("#choises li img").draggable({
        revert: true,
        zIndex: 10,
        snap: "#answers li",
        snapMode: "inner",
        snapTolerance: 40,
        start: function (event, ui) {
            lastPlace = $(this).parent();
        }
    });

    $("#answers li").droppable({
        drop: function (event, ui) {
            var dropped = ui.draggable;
            var droppedOn = this;

            if ($(droppedOn).children().length > 0) {
                $(droppedOn).children().detach().prependTo($(lastPlace));
            }

            $(dropped).detach().css({
                top: 0,
                left: 0
            }).prependTo($(droppedOn));
        }
    });
})(jQuery);

如您所见，我只是将您开始拖动的位置保留在变量 lastPlace 中，然后当您放下并检查某些东西时，将其放置在您之前开始拖动的位置。

Answer 2

我也遇到了同样的问题。但是我的代码有点不同。

    $(document).ready(function(){
    var x=[60,270,480];
    var y=[170,170,170];

    $(".draggable").draggable({
        revert:"invalid",
        start:function(){

        }
    });

    $(".droppable").droppable({
        accept:".draggable",
        hoverClass:"active",
        drop:function(ev,ui){
            if($(this).attr("name")!=null){
               var d=$(this).attr("name");
               var dgid=$(ui.draggable).attr("data-id")-1;
               $("#"+d).animate({left:x[dgid],top:y[dgid]});
               $("#drop"+$(ui.draggable).attr("data-id")).attr("name",$(this).attr("name"));
               $("#"+d).attr("data-id",$(ui.draggable).attr("data-id"));
            }
            var dpid=$(this).attr("data-id")-1;
            $(this).attr("name",$(ui.draggable).attr("id"));
            $(ui.draggable).attr("data-id",$(this).attr("data-id"));
            $(ui.draggable).animate({left:x[dpid],top:y[dpid]},300);
        }
    });
});

查看Fiddle

Answer 3

您可能应该尝试使用sortable，而不是在接收列表中放置droppable。这应该为您提供您正在寻找的功能。