자녀를 부모로 끌어다 놓고 여전히 자녀에게 액세스하십시오.

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 트리를 버블 링하지 못하도록합니다. 부모 핸들을 방지합니다. rs가 이벤트 알림을받지 못합니다.