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，禁用对句柄拖动开始的传播以及许多其他操作，但它们都不起作用。

不是，当event.target返回外部div时，我无法找到解决哪个孩子开始拖拽的方法。

我确信这可以做到并且不会太难？

我已经考虑过将拖动移动到所有内部div，但我不确定这是否能解决我的问题，或者创建一组全新的问题，而且我觉得这不是正确的方法< / p>

Answer 1

信不信由你，但实际上你需要在输入上设置draggable="true"，然后在运行dragstart的输入上为event.preventDefault()添加事件处理程序：

<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()。

当父项可拖动时，防止拖动子元素

1 个答案: