jquery - jQuery droppable:根据条件删除项目，否则反弹

我有一些盒子和一些文字。我将文本拖到那个框中。
应当拖动的文本的html是：

<div class="module-drag-text ui-draggable ui-draggable-handle">text1</div>
<div class="module-drag-text ui-draggable ui-draggable-handle">text2</div>
<div class="module-drag-text ui-draggable ui-draggable-handle">text3</div>

和我在其中拖动该文本框的html是：

<div class="module-drag-box ui-droppable"></div>
<div class="module-drag-box ui-droppable"></div>
<div class="module-drag-box ui-droppable"></div>

因此整个html看起来像这样：

<div class="wrapper">
 <div class="module-drag-text ui-draggable ui-draggable-handle">text1</div>
    <div class="module-drag-text ui-draggable ui-draggable-handle">text2</div>
    <div class="module-drag-text ui-draggable ui-draggable-handle">text3</div>
    <div class="module-drag-box ui-droppable"></div>
    <div class="module-drag-box ui-droppable"></div>
    <div class="module-drag-box ui-droppable"></div>
</div>

现在，我要的是text1应该只放到第一个droppable div上，而text2放到第二个droppable div上。

如果用户尝试将text1拖动到第二个droppable div中，则应将其反弹回其原始位置。

我为拖放编写的代码是：

drag : function() {
    dragText.draggable({
      containment : ".popup",
      revert : "invalid"
    });
    dragBox.droppable({
      drop : function(event, ui) {
        var drop = jQuery(event.target);
        drop.html(ui.draggable.html());
        ui.draggable.remove();
        drop.droppable("destroy");
      }
    });
  },

但是我不应该在哪里写逻辑。我知道它具有accept属性，但是根据我的问题，我不知道如何使用它。

最佳答案

您可以使用accept选项


接受选项确定哪个元素（或元素组）是
被目标可投放对象接受。


使用revert选项将可拖动对象恢复到原始位置

$("#draggable, #draggable-nonvalid").draggable({ revert: 'invalid' });

$("#droppable").droppable({
    accept: '#draggable-nonvalid',

});

请参阅下面的演示，我在其中完成了将文本1放入droppable的演示，其余的文本则不会放入该droppable。同样，你可以休息

Working Demo

Working Demo 2-用于动态接受选择

$(".dragg").draggable({ revert: 'invalid' });

$("#droppable").droppable({
    accept: function(d){if($(this).hasClass(d.attr("id"))){return true;}},

});

关于jquery - jQuery droppable:根据条件删除项目，否则反弹，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39226224/