Javascript Jquery拖放允许2个元素

我在jquery的拖放方面遇到了一些问题。我只想从每个“ul”拖动一个元素。所以我想要的结果是红色框中的“test”和“foo”。如何跟踪红色框中的元素

代码如下：

---

thanx提前填写两个单独的计数器，每种项目类型一个（并为您的项目分类以识别它们）

使用check（）函数检查限制，如果达到或未达到，则返回true/false。使用drop（）函数更新计数器

$(function() {
    var limit = 1;
    var counter_test = 0;
    var counter_foo = 0;
    $("[id=drag]").draggable({
        revert: "invalid"
    });
    $('#div1').droppable({
        accept: function(item) {
            if ($(item).hasClass('test')) {
                if (counter_test >= limit) {
                    return false;
                }
            }
            else {
                if (counter_foo >= limit) {
                    return false;
                }
            }
            return true;
        },
        drop: function(e, ui) {
            if (ui.draggable.hasClass('test')) {
                counter_test++;
            }
            else {
                counter_foo++;
            }
        }
    });
});
​

我更新了你的小提琴。 稍微复杂一点的解决方案如下：

如您所见，我从

li

元素中删除了

drag

id。id在网页中应该是唯一的。 您可以使用选择器（另一个选择器）（

#lists li

）拖动这些元素。 然后我使用两个变量来跟踪在红色div中拖放的对象的数量。 第一个是“限制”，第二个是“左”

limits

是每个列表中允许的元素数（基于自定义html5数据dragtype属性），

left

是允许的元素总数。 因此，例如，如果您希望能够添加两个类型为“foo”的元素和一个类型为“test”的元素，您可以使用

var limits = { test: 1, foo: 2}, left = 3;

呃，如果你想允许两个“foo”和一个“test”，但总共有两个元素， 你可以用

var limits = { test: 1, foo: 2}, left = 2;

正如您所看到的，它比您要求的版本稍微灵活一些

每次删除元素时，drop事件处理程序都会使用

drg.draggable

（注意函数的参数

（e，drg）

）及其类型

draggable.data（'dragtype'）

因此，如果仅对一种类型的

li

达到限制，则可以使用

$（'li[data dragtype='+dragtype+']'）禁用该类型元素的拖动功能。draggable（'disable'）

需要注意的一件重要事情是，添加另一种类型的列表是多么容易。例如，如果您想添加类型为“bar”的

li

元素，那么您可以像这样添加

ul

元素

<ul class="bar">
    <li data-dragtype="bar">bar1</li>
    <li data-dragtype="bar">bar2</li>
    <li data-dragtype="bar">bar3</li>
    <li data-dragtype="bar">bar4</li>
</ul>

---

解决方案的想法：。您只能放置1个测试元素和1个foo元素，然后您仍然可以拖放，但拖放在可拖放元素中不会被接受。

哦，就像Giovanni提到的，您不能在一个页面上多次使用相同的ID，请也解决这个问题。为什么是-1？这是一个紧凑、富有表现力且灵活的解决方案。

$(function() {
    var limits = { test: 1, foo: 1}, 
        left = 2;
    $("#lists li").draggable({
        revert: "invalid"
    });
    $('#div1').droppable({
        drop: function(e, drg) {
            var draggable = $(drg.draggable), 
                dragtype = draggable.data('dragtype');
            left -=1;
            limits[dragtype] -= 1;
            if (left == 0) {
                $(this).droppable("disable");
                $('#lists li').draggable("disable");
            }
            if (limits[dragtype] == 0){
                $('li[data-dragtype=' + dragtype +']').draggable('disable');
            }
        }
    });
});​

<ul class="bar">
    <li data-dragtype="bar">bar1</li>
    <li data-dragtype="bar">bar2</li>
    <li data-dragtype="bar">bar3</li>
    <li data-dragtype="bar">bar4</li>
</ul>

var limits = { test: 1, foo: 1, bar: 2}, left = 4;