本文介绍了React 实现拖拽功能的示例代码,分享给大家,具体如下:
实现效果:
因为工作中会用到 JIRA 所以想实现一下相似的功能,顺便学习一下 H5 的拖拽。不支持拖拽改变顺序,感觉有点麻烦,而且没必要。感觉相关的博文好少的,大部分都是直接上代码,没有解释。
图片默认可以拖动,其他元素的拖动效果同图片。正常的 div 是不能被拖动的,鼠标点击选择后移动没有效果,需要加 draggable=”true” 使得元素可以被拖动。
拖拽相关的几个事件,有被拖动元素的事件,也有拖动进入的容器元素的事件。
被拖拽元素的事件:ondragstart,ondragend
放置元素的事件:ondr