Question

如果在同一区域放置了另一个项目，我需要防止项目被丢弃在特定区域。

有没有办法（可能通过使用禁用功能）使用jQuery UI执行此操作？

以下是一个例子：

以下代码用于通知用户删除项目的dropzone的ID。我需要的是一个函数，如果项目1已经放在位置1，将阻止用户将项目2放在位置1上。任何想法？如果一个区域已经被一个项目“占用”，我需要一种防止碰撞的东西。

 $( ".item" ).draggable({
   snap: ".dropzone",
   stop: function (event, ui) {
     var item = this;
     $('#dropzones li').each(function(){
         if($(item).position().left == $(this).position().left)
             alert($(this).attr('id'));
     });
   }
 });

谢谢！

劳伦

Answer 1

您需要在drop zone元素中添加droppable。我还添加了恢复到可拖动对象。无论物品是否“掉落”，您的位置检查都将始终通过。我使用了out和drop事件的组合来在删除某些内容后启用/禁用放置区域。这与使用revert一起将获得所需的结果。还有一些方法可以定制“开箱即用”的还原功能，以满足您的需求。

$(".dropzone").droppable({
    disabled: false,
    out: function ( event, ui ) {
        $(this).droppable("option", "disabled", false)
    },
    drop: function( event, ui ) {
         $(this).droppable("option", "disabled", true);
    }
});

更新了jsFiddle

jQuery UI droppable - 如果在同一区域中删除了另一个项目，则阻止项目在特定区域中被删除

1 个答案: