перетащите дочерние элементы и отпустите к родительскому объекту и по-прежнему получаете доступ к дочерним элементам

Question 1

Я пытаюсь составить список элементов, которые можно перетаскивать (и под) перетаскивать.

Мне удалось перетащить элемент в его родительский элемент, а дочерний элемент - в его только что перемещенный элемент.

Но тогда я не могу "получить доступ" к ребенку. Например, двойной щелчок по элементу li должен открыть окно с именем этого элемента. Чего я не могу, событие всегда запускает родитель.

Я пытался поиграть с zIndex, но это не помогло.

Смотрите мою скрипку, это будет более явным. http://jsfiddle.net/WeeHT/

Благодарю вас!

function make_draggable() {
$('.account_line').draggable({
    containment: '#COA_Table',
    cursor: 'move',
    snap: '#COA_Table',
    helper: 'clone'
})
}

function make_droppable() {
$('.account_line').droppable({
    accept: '.account_line',
    tolerance: 'pointer',
    hoverClass: "account_line_drop-hover",
    zIndex: zindexlevel++,
    drop: function (e, ui) {
        // if this is first child we append a new ul
        if ($(this).children('ul').length == 0) {
            $(this).append('<ul></ul>')
        }

        $(this).children('ul').append(ui.draggable)
        $(this).css({
            backgroundColor: 'white'
        })
        $(this).css({
            zIndex: zindexlevel++
        })
    },
    over: function () {
        $(this).css({
            backgroundColor: "grey"
        });
    },
    out: function () {
        $(this).css({
            backgroundColor: 'white'
        })
    }

})
}

jquery jquery-ui draggable droppable

0

Eagle1 13 Июл 2013 в 02:20

Answer

Это потому, что событие поднимается до дерева DOM.

Поэтому вам нужно добавить следующую строку в начало обработчика события двойного щелчка:

e.stopPropagation();

Тогда в вашем коде это будет выглядеть так:

function start_edit() {
    $('.account_line').dblclick(function (e) {
        e.stopPropagation();
        var account_name = $(this).children('p').first().html()
        $('#account_edit').css({
            display: 'block'
        });
        $('#account_edit').children('#account_name_to_edit').html(account_name);
    })
}

документы jQuery

Описание: предотвращает всплытие события в дереве DOM, предотвращая получение уведомления о событии родительскими обработчиками.

1

rusln 14 Июл 2013 в 00:25

Большое спасибо. Это очень полезно знать. Еще один вопрос, если можно: у меня такая же проблема, когда дело доходит до раскрашивания линии, которую я перебираю: родители окрашиваются, когда я над их детьми. Я попытался разместить e.stopPropagation (), но, конечно, он отключает .droppable (), поэтому он не работает. Где бы вы его разместили, как бы вы с этим справились?

–

Eagle1

14 Июл 2013 в 12:18

Question 2