jQuery UI 可拖放

Question

我有一个 div class 图库，我有两个可放置的 div 并且我无法将元素从一个可放置的 div 拖动到另一个可放置的 div。当我将 drop 元素拖到另一个 droppable div 时，它总是回到它的 droppable div。有人可以帮我吗？有人吗？

这是我的示例代码，加上一个 jsFiddle：http://jsfiddle.net/2n0bevxo/159/

代码：

css:

#gallery {
float: left;
width: 65%;
min-height: 11em;
}
.gallery.custom-state-active {
background: #eee;
}
.gallery li {
float: left;
width: 96px;
padding: 0.10em;
margin: 0 0.4em 0.4em 0;
}
.gallery li img {
width: 100%;
cursor: move;
}
#trash {
float: left;
width: 32%;
min-height: 10em;
padding: 1%;
display: block;
margin: 0.3em;
}
#trash2 {
float: left;
width: 32%;
min-height: 10em;
padding: 1%;
display: block;
margin: 0.3em;
}
h1 {
font-size: 1em;
text-align: center;
}

js:

$(function () {
// variable
var $gallery = $("#gallery"),
    $trash = $("#trash");

$("li", $gallery).draggable({
    revert: "invalid", //
    helper: "clone",
    cursor: "move"
});

$('#trash').droppable({
    accept: "#gallery > li, #trash2 > ul > li",
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        deleteImage(ui.draggable);
    }
});

var recycle_icon = "<a    href='link/to/recycle/script/when/we/have/js/off'</a>";

function deleteImage($item) {
    $item.fadeOut(function () {
        var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);

        $item.find("a.ui-icon-trash").remove();
        $item.append(recycle_icon).appendTo($list).fadeIn(function () {
            $item.animate({
                width: "48px"
            })
                .find("img")
                .animate({
                height: "36px"
            });
        });
    });
}
});

$(function () {
// variable
var $gallery = $("#gallery"),
    $trash2 = $("#trash2");

$("li", $gallery).draggable({
    revert: "invalid", // 
    helper: "clone",
    cursor: "move"
});

$('#trash2').droppable({
    accept: "#gallery > li, #trash > ul > li",
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        deleteImage(ui.draggable);
    }
});

var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off'</a>";

function deleteImage($item) {
    $item.fadeOut(function () {
        var $list2 = $("ul", $trash2).length ? $("ul", $trash2) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash2);

        $item.find("a.ui-icon-trash").remove();
        $item.append(recycle_icon).appendTo($list2).fadeIn(function () {
            $item.animate({
                width: "48px"
            })
                .find("img")
                .animate({
                height: "36px"
            });
        });
    });
}
});

html:

<div class="ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
    <li class="ui-widget-content ui-corner-tr">
        <img src="http://placehold.it/140x100" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <img src="http://placehold.it/140x100" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <img src="http://placehold.it/140x100" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <img src="http://placehold.it/140x100" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <img src="http://placehold.it/140x100" width="96" height="72">
    </li>
</ul>
</div>
<div id="trash" class="ui-widget-content">
 <h1 class="ui-widget-header">Disagree</h1>

</div>
<div id="trash2" class="ui-widget-content">
 <h1 class="ui-widget-header">Agree</h1>

</div>

Answer 1

您需要更改 accept（示例 http://jsfiddle.net/2n0bevxo/166/）：

$('#trash').droppable({
    accept: "#gallery > li,#trash2 > ul > li",
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        deleteImage(ui.draggable);
    }
});

$('#trash2').droppable({
    accept: "#gallery > li,#trash > ul > li",
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        deleteImage(ui.draggable);
    }
});

请注意，我为每个可放置区域定义了接受来自其同级元素的元素

jQuery UI 可拖放

jQuery UI Draggable and Droppable

jquery

jquery-ui

jquery-droppable

jquery-draggable