单页上有两个可拖动和两个可放置的

Question

我有两组可拖动元素和两组可丢弃元素。

我想要的是第一组可拖放元素，只能放在第一组droppable中。 第二组draggables应该只能放到第二组droppables内部。

代码段：

// 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

This就是你想要的。

使用droppable小部件的Accept属性和draggable小部件的revert属性来实现此目的。