如何在div中拖動元素

Question

我有一個組 HTML 元素，它們在可拖動的 div 元素中。 所以我有一個范圍 HTML 元素。 當我想移動范圍時，所有線都在拖動。 我設置了范圍元素的draggable="false" ，但它不起作用。 （我在chrome瀏覽器中測試過）

 .draggable { width: 400px; height: 400px; }

 <div draggable="true" class="draggable"> <input type="checkbox" /> <label>This is line</label> <input type="range" min="0" max="100" /> </div>

Answer 1

您可以在用戶單擊范圍時禁用拖動並在之后啟用它。

input.addEventListener('mousedown', e => {
    e.target.parentNode.draggable = false;
});
input.addEventListener('mouseup', e => {
    e.target.parentNode.draggable = true;
});

演示

Answer 2

在 mousedown 和 mouseup 上禁用/啟用“可拖動”。

 document.querySelector('input[type="range"]').addEventListener('mousedown', (event) => { setDraggable(event.target.parentNode, false); }); document.querySelector('input[type="range"]').addEventListener('mouseup', (event) => { setDraggable(event.target.parentNode, true); }); const setDraggable = (e, val) => { if (e.parentNode) { setDraggable(e.parentNode, val); } e.draggable = val; }

 .draggable{ width:400px; height:400px; }

 <div draggable="true"> <div class="draggable" draggable="true"> <input type="checkbox" /> <label>This is line</label> <input type="range" min="0" max="100" id="rangeInput" /> </div> </div>