Question

我知道我遗漏了一些非常基本的东西，但是在你将堆叠的“可放置”DIV叠加在一起的情况下使用jQuery（想想嵌套的盒子），你如何允许和接受元素掉落最顶级DIV然后取消拖放事件，以便它也不会发送到下面的其他“可放置”DIV？

        $('#'+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将收到该元素。但是，通过将此选项设置为如果是，任何父级droppable都不会收到该元素。

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

<强> Working Example

如何在堆叠的DIV上停止jQuery拖放事件？

1 个答案: