如何防止拖動孩子，但允許拖動父母？

我有一個div，用戶可以拖動，裏面該分區是一些文字，我想允許用戶選擇（因此他們不能將它拖動）跨度。我如何讓div拖動，但不是跨度？如何防止拖動孩子，但允許拖動父母？

dragstart事件是對格。

我可能俯瞰簡單的東西。我在div上嘗試了draggable = true，並且在span上draggable = false。這沒有用。試圖在dragstart上返回false，這也不起作用。

的dragstart（大約）：

var jTarget = $(e.target); 
if ((jTarget.is('div.header') || (jTarget.parents('div.header')) 
     && !jTarget.is('a, input, span'))) 
{ 
    e.originalEvent.dataTransfer.setData("Text", "test"); 
} 
else 
{ 
    if(e.preventBubble) 
     e.preventBubble(); 
    if(e.stopPropagation) 
     e.stopPropagation(); 
    return false;//??? 
}

的的if else部分工作如我所料，但我不能讓任何事來阻止拖動並允許選擇。

來源

2011-07-27 aepheus

不認爲這是可能的 - 儘管你可以解決它通過提供在拖動事件可以連接到div一個拖動手柄，使內部文本可以進行選擇。無法區分點擊/拖動和點擊/拖動來突出顯示。它們只是一個鼠標移動，然後是鼠標移動。 –

你的'dragstart'處理程序中有什麼代碼？請將其添加到您的問題。 – robertc

@Marc乙 - 我開始覺得我有可能做到這一點。儘管如此，這還不夠理想，因爲我的跨度可能佔用1.5行，而我希望其他0.5行可拖動。這將很難拉開。而且，這個對象是頭對象，因此爲拖動目的添加另一個頭是不可能的。 – aepheus

戴上跨度鼠標按下處理程序和停止事件傳播在那裏。

來源

2012-02-18 06:24:51

測試（我有一個類似的問題），至少它的工作原理是沒有拖動會發生，但其他任何事情都不會發生，沒有選擇文本可能，如果對象是contenteditable你不能設置光標... – mech

剛剛發佈，以防有人搜索它類似的問題

element.addEventListener('mousedown', function() { this.parentNode.setAttribute("draggable", false); }); 
element.addEventListener('mouseup', function() { this.parentNode.setAttribute("draggable", true); });

工作對我來說

來源

2016-01-04 10:06:25 mech

您可以將子元素更改爲可拖動，防止默認時ondragstart，這將離開正規行爲子元素和父仍然可拖動

function drag(e){ if(e.target.type=="range")e.preventDefault();/*rest of your code*/ }

HTML：

<input type="range" draggable="true" ondragstart="drag(event)">

來源

2016-07-15 04:12:25 shuji

這對我有用 –

如何防止拖動孩子，但允許拖動父母？

回答

相關問題