react-draggable 拖动div时的onMouseOver事件

我正在使用react-draggable将div拖到桌子上的另一个位置。问题是我需要让基础<td>触发onMouseOver事件,同时我将div拖到它们上面。但由于我的鼠标位于可拖动的div上,因此鼠标事件不会触发基础<td>。

    handleStart = (event, data, name) => {
        console.log(event, data, name)
        var names = document.getElementsByClassName("group")

        for (var i = 0; i < names.length; i++) {
            names[i].style.pointerEvents = "none";
        }

    }
    handleStop = (e, data) => {
        // console.log(e, data)
        var names = document.getElementsByClassName("group")
        for (var i = 0; i < names.length; i++) {
            names[i].style.pointerEvents = "auto";
        }
    }
   <div className="transport" onMouseOver={() => this.mouseEnter("1")}>
      <div className="groupCon" >
          <Draggable
               onStart={(event, data) => this.handleStart(event, data, "拖动对象")}
               onStop={this.handleStop}
               position={{ x: 0, y: 0 }}
         >
              <div className="group" style={{ left: '0%' }} >
                  <img src={Level1} alt="" className='level' draggable="false" />
                   <Popover placement="bottom" content={this.content} trigger="contextMenu">
                      <img src={Car} alt="" draggable="false" />
                   </Popover>
                   <p>1号车</p>
                   <span>路程进度0%</span>
              </div>
      </Draggable>
    </div>
 </div>

我能够通过创建一个可观察的事件来修复这个问题,当它为真时,在被拖动的isDraggable上设置pointerEvents=none;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 2,523评论 0 4
  • 拖放事件 H5的拖放事件提供了多个接口: 1、drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应...
    用技术改变世界阅读 1,466评论 0 0
  • jquery介绍 jQuery是目前使用最广泛的javascript函数库 据统计,全世界排名前100万的网站,有...
    就是这么帅_567e阅读 1,225评论 0 0
  • 拖拉事件 拖拉事件的种类 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标...
    oWSQo阅读 909评论 0 2
  • 最近在项目中使用了 react-dnd[https://react-dnd.github.io/react-dnd...
    DYBOY阅读 11,210评论 4 63