2

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

这是代码：http: //jsfiddle.net/9edge/CTpTr/

提前谢谢

4

3 回答 3

1

填写两个单独的计数器，每个项目类型一个（并给你的项目类别来识别它们）。

使用 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++;
            }
        }
    });
});
​

小提琴

修复了 ID 的新小提琴

于 2012-08-08T08:12:58.780 回答
1

解决方案的想法：http: //jsfiddle.net/CTpTr/23/。您只能放置 1 个测试元素和 1 个 foo 元素，然后您仍然可以拖放，但 droppable 元素中不接受放置。

于 2012-08-08T08:29:48.783 回答
0

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

http://jsfiddle.net/CTpTr/18/

如您所见，我从元素中删除了dragid 。liid 在网页中应该是唯一的。您可以使用选择器使这些元素可拖动到另一个选择器 ( #lists li)。然后我使用两个变量来跟踪在红色 div 中拖放的对象数量。第一个是“限制”，第二个是“左”。

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

limits是每个列表中允许的元素数（基于自定义 html5 data-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')。

$(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');
            }
        }
    });
});​

因此，如果仅对一种类型达到限制li，您可以使用 仅禁用该类型元素的拖动功能$('li[data-dragtype=' + dragtype +']').draggable('disable')。

需要注意的重要一点是添加另一种类型的列表是多么容易。例如，如果您想添加li“bar”类型的元素，您可以添加这样的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>

并相应地设置limits和left变量，而不更改放置事件处理程序的代码。例如：

var limits = { test: 1, foo: 1, bar: 2}, left = 4;
于 2012-08-08T08:13:45.900 回答