jQuery UI - Droppable div 只接受一个可拖动的

Question

这里是新手。我正在制作一个示例 jQuery 用户界面，它使用两个可放置的 divs 和一些可拖动的元素。如何使两个可放置的divs 不接受多个可拖动元素。我用谷歌搜索了它，但没有找到任何解决方法。有人帮忙吗？

这是我的示例代码和一个 Fiddle：http://jsfiddle.net/kd5q594g/2/

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"> 
        <a href="http://www.imageno.com/6kkcc9rmpq0rpic.html"   target="_blank"><img   src="http://www.imageno.com/thumbs/20150518/6kkcc9rmpq0r.jpg"  width="96"   height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <a href="http://www.imageno.com/6kkcc9rmpq0rpic.html" target="_blank"><img src="http://www.imageno.com/thumbs/20150518/6kkcc9rmpq0r.jpg"  width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <a href="http://www.imageno.com/6kkcc9rmpq0rpic.html" target="_blank"><img src="http://www.imageno.com/thumbs/20150518/6kkcc9rmpq0r.jpg" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <a href="http://www.imageno.com/6kkcc9rmpq0rpic.html" target="_blank"><img src="http://www.imageno.com/thumbs/20150518/6kkcc9rmpq0r.jpg" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <a href="http://www.imageno.com/6kkcc9rmpq0rpic.html" target="_blank"><img src="http://www.imageno.com/thumbs/20150518/6kkcc9rmpq0r.jpg" 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>

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: 20%;
min-height: 10em;
padding: 1%;
display: block;
margin: 0.3em;
}
#trash2 {
float: left;
width: 20%;
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);
    }
});

$gallery.droppable({
    accept: "#trash li, #trash2 li",
    drop: function (event, ui) {
        recycleImage(ui.draggable);
    }
});

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

function recycleImage($item) {
    $item.fadeOut(function () {
        $item.find("a.ui-icon-refresh")
            .remove()
            .end()
            .css("width", "96px")
            .append(trash_icon)
            .find("img")
            .css("height", "72px")
            .end()
            .appendTo($gallery)
            .fadeIn();
    });
}

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: "100px"
            })
                .find("img")
                .animate({
                height: "70px"
            });
        });
    });
}
}); 

$(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: "100px"
            })
                .find("img")
                .animate({
                height: "70px"
            });
        });
    });
}
});

Answer 1

在放置事件时，检查该元素是否可放置元素中包含可拖动元素，如果已经存在则返回 false。

Answer 2

在droppable 的drop 功能中，只需禁用droppable 功能，使其仅发生一次。

drop: function (event, ui) {
        $(this).droppable('disable');
    }