当 parent 可拖动时防止 child 元素被拖动

Question

我有以下 HTML（反应）设置：

<div 
    onDragStart={
    (e) => { this.bound_handleDragStart.call(this, e) }}        
    draggable="true"
>
   <div>Stuff here</div>
   <div><input .../></div>
</div>

此设置使整个外部 div 可拖动。

但是，如果拖动从输入开始，我希望取消它。

我已经尝试将 onDragStart 添加到输入，将 eventListener 添加到输入并返回 false，禁用手柄拖动开始时的传播，以及许多其他操作，但是 none 其中有效。

事实上，当 event.target returns 外层 div 时，我看不出是哪个 child 开始了拖动。

我相信这是可以做到的，不会太难吧？

我考虑过将拖动移动到所有内部 divs，但我不确定这是否会解决我的问题，或者会产生一组全新的问题，而且我觉得这是方法不对

Answer 1

信不信由你，但实际上您需要在输入上设置 draggable="true"，然后在运行 [=13= 的输入上为 dragstart 添加一个事件处理程序]:

<div 
    onDragStart={
    (e) => { this.bound_handleDragStart.call(this, e) }}        
    draggable="true"
>
   <div>Stuff here</div>
   <div><input draggable="true" onDragStart={
     (e) => e.preventDefault()
   }/></div>
</div>

这将阻止实际的拖动，但父级上的 dragstart 事件仍会被触发，因为它冒泡了。如果你也想阻止这种情况，你还需要调用 event.stopPropagation().

当 parent 可拖动时防止 child 元素被拖动

Prevent child element from being dragged when parent is draggable

html

javascript

events

drag

reactjs