Как остановить событие перетаскивания jQuery на сложенных DIV?

0

Я знаю, что я пропускаю что-то очень простое, но при использовании jQuery в ситуации, когда у вас есть многослойные "droppable" DIVs друг над другом (думаю, вложенные поля), как вы разрешаете и принимаете падение элемента в верхней части 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

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

Теги:
drag-and-drop
jquery-ui-draggable

1 ответ

2
Лучший ответ

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

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

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

Рабочий пример

  • 0
    Это делает трюк, спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню