单个页面上有两个可拖动元素和两个可放置元素

Question

我有两组可拖动元素和两组可放置元素。

我想要的是第一组可拖动元素只能在第一组可放置元素内放置。 第二组可拖动对象只能放置在第二组可放置对象内部。

代码片段：

// this can be dropped only inside .drop elements
$('.drag').draggable({ revert: true });
$('.drop').droppable({
    drop: function() {
        //          
   }
});

// this can be dropped only inside .drop2 elements
$('.drag2').draggable({ revert: true });
$('.drop2').droppable({
    drop: function() {
        //          
   }
});

因此用户将无法将具有 .drag 类的元素拖放到 .drop2 容器中。

Answer 1

这就是你想要的。

使用可放置小部件的 Accept 属性和 revert 可拖动小部件的属性来实现此目的。