Jquery 可删除 : drop item based on a condition otherwise bounce back

Question

我有一些盒子和一些文字。我将文本拖到该框中。 应拖动的文本的 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 应该放到第二个 droppablediv。

如果用户尝试将 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 属性，但根据我的问题不知道如何使用它。

Answer 1

您可以使用接受选项

accept option determine which element (or group of elements) is accepted by the target droppable.

使用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;}},

});