如何动态设置多个Droppable的接受

时间:2014-08-27 07:54:46

标签: jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

请你看一下 This Demo ,让我知道如何只使用一次调用.droppable()和可拖动元素的接受选项通过删除来接受具体ID /所以:

dropboxt0接受dragboxt0
dropboxt1接受dragboxt1
dropboxt2接受dragboxt2
dropboxt3接受dragboxt3
dropboxt4接受dragboxt4

我使用了以下代码

$(".dragbox").draggable();
$(".dropbox").droppable({
    accept:   $(this).attr('id'),
    drop: function (event, ui) {
        $(this)
            .addClass("ui-state-highlight")
            .html("Dropped!");
    }
});

但它没有完成这项工作。

由于

1 个答案:

答案 0 :(得分:0)

此问题已在此处讨论过:jquery droppable accept

而不是使用单个选择器进行接受,您可以使用必须返回true或false的函数。 在函数内部,有很多方法可以达到您想要的行为。我选择以下内容:

<div id="container">
    <div class="dropbox" data-drop-id="db01"></div>
    <div class="dropbox" data-drop-id="db02"></div>
    <div class="dropbox" data-drop-id="db03"></div>
    <div class="dropbox" data-drop-id="db04"></div>
    <div class="dragbox" data-drag-id="db01"></div>
    <div class="dragbox" data-drag-id="db02"></div>
    <div class="dragbox" data-drag-id="db03"></div>
    <div class="dragbox" data-drag-id="db04"></div>
</div>

js with accept - function,返回true或false:

$(".dropbox").droppable({
accept: function (myDragBox) {
    var id_group_drop, id_group_drag;
    //get the "id_group" stored in a data-attribute of the draggable
    id_group_drag = $(myDragBox).attr("data-drag-id");
    //get the "id_group" stored in a data-attribute of the droppable
    id_group_drop = $(this).attr("data-drop-id");
    //compare the id_groups, return true if they match or false otherwise
    return id_group_drop == id_group_drag;
},
drop: function (event, ui) {
    $(this)
        .addClass("ui-state-highlight")
        .html("Dropped!");
}

});

对我的比较很重要的是,drop和dragbox的id是相同的。因此我没有使用id属性,而是使用我自己的data-id属性,因为我喜欢让我的id独特...

在此处查看演示:http://jsfiddle.net/u9w63y2q/1/