Как остановить событие перетаскивания jQuery на многоуровневые DIV?

Question

Я знаю, что мне не хватает чего-то очень простого, но при использовании jQuery в ситуации, когда у вас есть многослойные «droppable» DIVs друг над другом (думаю, вложенные поля), как вы разрешаете и принимаете элемент drop на вершине большинство DIV, а затем отмените событие перетаскивания/перетаскивания, чтобы оно не было отправлено на другие «droppable» DIVs ниже?

 $('#'+objectID+" .task-droppable").droppable({ 
     accept: function(d) { 
      if(d.hasClass("source-task")||d.hasClass("source-sequence")){ //sequences can contain both sequences and tasks 
       return true; 
      } //end if 
     }, //end accept 
     activeClass: "isDropDest", 
     //hoverClass: "isDragging", 

     //this is used for both drag/drop and item moves 
     drop: function(event, ui) { 
      var draggableId = ui.draggable.attr("id"); 
      var droppableId = $(this).attr("id"); 

      //var sender_id = ui.sender.attr('id'); 
      //var receiver_id = $(this).attr('id'); 
      //var item_id = ui.item.attr('id'); 
      //var above_id = ui.item.prev().attr('id'); 
      //var below_id = ui.item.next().attr('id'); 

      //check if this is a drag/drop or a move by looking for the object class 
      if(!$('#'+draggableId).hasClass('object')) { 
       $('#'+draggableId).css('top', '0px'); 
       $('#'+draggableId).css('left', '0px'); 
       createObject(draggableId, droppableId); 
      } else { 
       //handle the move - do nothing 
      } //end if 

      event.stopPropagation(); 
     } //end drop 
    }); //end droppable 

Извините, сегодня недостаточно кофе.

Answer 1

Похоже, вам, возможно, придется использовать greedy option

По умолчанию, когда элемент отбрасывается на вложенном droppables, каждый Droppable получат элемент. Однако, установив этот параметр в значение true, любые родительские droppables не получат этот элемент.

$(".selector").droppable({ greedy: true }); 

Working Example