Question

我有一个div类库，我有两个droppable div，我有一个问题，从一个droppable div拖动元素到另一个droppable 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 Draggable和Droppable

1 个答案: