其他可拖動元素內的可拖動元素父項隱藏的事件

所以，我有一個div內的div並且都是可拖動的。當我試圖拖動孩子時，它只拖動父母。其他可拖動元素內的可拖動元素父項隱藏的事件

就好像父母掩蓋了孩子。

我嘗試在child的事件監聽器中將useCapture設置爲true，因爲這應該強制首先調用子事件。然後在handleDragStart方法中，我調用stopPropogation（），希望它能取代父事件。沒有骰子...

（例如代碼，因爲它需要的jsfiddle鏈接出於某種原因）

var parentPiece = document.createElement('div'); 
parentPiece.setAttribute('draggable', true); 
parentPiece.addEventListener('dragstart', handleDragStart, false); 

... 

var childPiece = document.createElement('div'); 
childPiece.setAttribute('draggable', true); 
childPiece.addEventListener('dragstart', handleDragStart, true); 

... 

function handleDragStart(e) { 
    console.log(this.outerHTML); 
    e.dataTransfer.effectAllowed = 'move'; 
    e.stopPropagation(); 
}

這裏是我的jsfiddle。我爲這個爛攤子道歉，第一次嘗試做拖放。

您應該能夠從底部拖動元素到線條和藍色方塊中。行中的元素應該可以拖動到其他行中。問題在於可拖動元素放置在藍色方塊中，它拖動了整條線而不是被點擊的孩子。

我可能會錯過像CSS規則那樣真正愚蠢的東西。 > _ <

我打算使用任何庫來使這個清潔/更可維護。

任何幫助是非常感謝，而我試圖學習這一點。
謝謝！

來源

2017-04-05 BenSeawalker

原來的問題是動態html元素。
事件偵聽器不會粘在它們上，除非它們已經在DOM中。
爲了解決這個問題，我添加了一個隱藏元素，並且每當我創建一個動態元素時，首先將它添加爲隱藏的子元素。然後，當我準備好使用它時，我將它移動到它需要的位置。這種感覺很不好，但是很有效。

來源

2017-04-06 06:59:48 BenSeawalker

其他可拖動元素內的可拖動元素父項隱藏的事件

回答

相關問題