如何使用Draggable和Droppable交换2个项目? [英] How to swap 2 items using Draggable and Droppable?

问题描述

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

I have 4 images. User can drag and drop them to another list and change the order of the images. Target is that the users selects the order of the images. The problem is that I am unable to swap these images when they are place on each other.

<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/

推荐答案

我的解决方案可能不是最优雅的(也许有人可以提供更直观的功能?)，但似乎可行；)

My solution might not be the most elegant (maybe someone can provide something more intuitive?), but it seems it works ;)

小提琴: 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中，稍后当放下并检查其中的内容时，请将其放置在之前开始拖动的位置.

As you can see I'm just keeping the place you started draggin from in a variable lastPlace and later when you drop and check something is there, you place it in the place you started dragging before.

这篇关于如何使用Draggable和Droppable交换2个项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！