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放到第二个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属性，但根据我的问题不知道如何使用它。

Answer 1

您可以使用accept选项

接受选项确定哪个元素（或元素组）被目标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;}},

});

Jquery droppable：根据条件放弃项目，否则反弹

1 个答案: