如何在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>