jquery - jquery，禁用拖放到另一个可拖动对象的顶部

Question

我正在尝试使用 div 制作一个基本的拖放界面，我拥有所有 div 和网格的工作，但我似乎无法弄清楚代码是什么来防止可拖动的对象被拖放到另一个或只允许在有空白空间的地方放置可拖动对象。有什么帮助吗？

Answer 1

这是一个拖放教程：http ://www.ericbieller.com/2010/06/24/how-to-create-a-simple-drag-and-drop-with-jquery/

如果您需要更具体的答案，则需要提出更具体的问题（带代码）。

Answer 2

你可以这样做：

1. 为所有 droppables 元素创建一个类，.cDrop为 draggables创建另一个类.cDrags。

2. 对 drop 使用类似于此的匿名函数调用：

   $('.cDrop').each(function(){
       $(this).droppable({
           drop: function(event, ui) {
               if((ui.draggable.isDroppedOverOtherDrag())){
                       $(ui.draggable).draggable('option','revert','valid');
               }else{
                      //You do here whatever you need to do. For expample:         
                       alert('Good Job!!');
   
               }
           }
       });
   });
   

3. 使用与此类似的匿名函数调用进行拖动：

   $( ".selector" ).draggable({
       start: function(event, ui) {
           $(this).draggable('option','revert','invalid');
   
       }
   });
   

这样，您只需“说”何时必须还原可拖动对象（即，当它没有被放置在正确的位置时）。

isDroppedOverOtherDrag()如果拖放的拖动超过另一个拖动，该函数将返回 true。否则它将返回 false 。要实现它，您应该使用 ui.draggable 对象的当前位置、已正确放置的其余拖动的位置及其宽度/高度。向 drop 函数添加一些代码并巧妙地使用 Drags 的 id 将使您拥有一个 var，其中包含已正确放入特定 drop 的 Drags。

希望能帮助到你