为范围输入禁用HTML5拖放

Question

是否有一种方法可以在可拖动元素内的特定元素上禁用HTML5拖放？

在我的情况下，我们正在构建所有具有设置的项目的列表，我们希望能够在其中使用<input type="range" />。但是，只要用户尝试拖动正确渲染的范围输入的手柄，整个可拖动项就会开始其事件的拖动周期。

我已尝试在范围输入中捕获事件，以防止发生默认事件。但是不会触发dragstart事件。

标记的结构大致如下：

<div class="item_wrapper" draggable="true">
  <div class="field-group param_percent">
    <label for="param_card">Darken</label>
    <div class="parameter" data-default="0" data-value="">
      <input type="range" id="param_card_range" min="0" max="100" step="1" value="0">
    </div>
  </div>
</div>

Answer 1

尝试像这样在屏幕CSS上禁用元素拖动。https://gist.github.com/msuchodolski/41c9338f3a732379dc570142826ed76e

这里是工作演示