拖動孩子＆放棄父母，仍然訪問子女

我試圖做一個項目，可以拖動和下降（和下）的列表。拖動孩子＆放棄父母，仍然訪問子女

我成功地將一個元素拖放到其父元素中，並將一個子元素拖放到其新移動的元素上。

但我不能做的是「訪問」一個孩子。例如，雙擊李元素應該打開一個包含該元素名稱的框。我不能，它總是觸發事件的父母。

我試圖玩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' 
     }) 
    } 

}) 
}

來源

2013-07-12 Eagle1

這是因爲事件冒泡到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樹，阻止任何父處理不會被通知事件。

來源

2013-07-13 20:25:54 rusln

非常感謝。這是一個非常方便的事情要知道。如果我願意，還有一個問題：當我談論着色時，我遇到了同樣的問題：父母在我的孩子身上染色。我試圖放置e.stopPropagation（），但它當然會切斷.droppable（），所以它不起作用。你會把它放在哪裏，你會如何處理？ – Eagle1

拖動孩子＆放棄父母，仍然訪問子女

回答

相關問題