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

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,但我不确定这是否能解决我的问题,或者创建一组全新的问题,而且我觉得这不是正确的方法

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