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

Question

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

Мне удастся удалить элемент в его родительский элемент и отбросить его на новый элемент.

но тогда то, что я не могу сделать, это «доступ» к ребенку. Например, двойной щелчок на элементе 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' 
     }) 
    } 

}) 
} 

Answer 1

Это потому, что событие дросселируется до дерева 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 docs

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