在一个页面上的两个可拖拽和两个可拖拽

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

This是你想要的。

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