html拖动事件,javascript拖拽事件详解
公司需要在不同的任务列表之间拖拽任务卡片来改变任务类别。于是找了相关文章，研究了一下。实现效果如下图。
拖拽实现
主要使用的是H5自己的拖放效果。实际上，项目的前端部分是用React编写的，只有在用H5实现之后，我才知道丹阿布拉莫夫有一个React-DnD组件来封装原生的拖放方法。稍微研究了一下就很强了。以后用的话，再写一篇文章分享。
相关事件定义与用法
涉及一个属性六个事件。这些活动都是H5原创的活动。
属性
Draggable:普通div不允许拖动。您需要添加属性draggable=true 来使元素可拖动。事件
Ondragstart:拖动元素事件。被拖动时调用。Ondrag:拖动元素事件。拖动元素时调用。Ondragend:拖动元素事件。当放置拖动元素时调用。Ondragenter:放置元素事件。将元素拖动到放置该元素的有效区域时调用。Ondragover:放置元素事件。拖动元素覆盖drop元素的有效区域时调用ondragleave: drop element事件。当被拖动的元素离开放置该元素的有效区域时调用。Ondrop:放置元素事件。当拖动元素放置在放置元素中时调用。基础代码实现
拖放相关事件的实现代码如下。
FunctionOndragStart () {/*拖动拖动元素时调用此事件。通常，它用于获取被拖动元素的唯一标识，如id。为了便于在后续数据更新过程中定位元素*/} Function Handle Ondragend(){/*放置被拖动的元素时调用此事件。一般用于重置变量操作*/}函数句柄dragon () {/*此事件可根据个人需要实现*/}拖动元素H5的代码如下
divdraggable= true ondragstart= handlondragstart() ondrag= handlondarg() ondragend= handlondragend()此元素是一个拖动元素/div。放置元素相关事件的实现代码如下
/*默认情况下，数据/元素不能放在其他元素中。如果要实现这个功能，我们需要防止元素的默认处理方法。我们可以通过调用event.preventDefault()方法来实现ondragover事件。*/function handleOndragover(event){ event . prevent default()；/*在此进行函数处理*/}函数handle ondragenter(event){ event . prevent default()；/*在此进行函数处理*/}函数handle ondragleave(event){ event . prevent default()；/*在这里做你的函数处理*/}函数句柄ondrop(event){ event . prevent default()；//清除默认事件。drop事件的默认行为是将其作为链接打开。/*通常，在这种情况下，当拖放元素时，它会与后端交互以更新数据。*/}拖放元素的H5代码如下
div ragenter= handle ondragenter(event) ondragover= handle ondragover(event) ondragleave= handle ondragleave(event) ondrop=" handle ondrop(event)此元素是一个drop元素/div实例。
下面的代码可以在两个div之间拖放子元素。
！DOCTYPE html html lang= zh-CN head meta charset= UTF-8 /meta name= viewport content= width=设备宽度，初始比例=1.0 /标题拖拽实现/title style type=text/css .父{ display:flex；宽度：450 pxjustify-content:space-around；} .容器{高度：300像素宽度：200像素背景色：rgba(255，255，0，0.3)；显示器：flex伸缩方向：列；对齐-内容：居中；对齐-项目：居中；} .box { width:100px；高度：50px背景色：rgba(255，255，255，1)；}/style script type= text/JavaScript function handleOndragstart(event){//设置被拖动的数据，可简单理解为设置包厢的值为被拖动元素的身份证。此处为框”事件。数据传输。setdata( Box ，事件。目标。id)；}函数handleOndragover(event){ event。防止默认()；}函数handleOndrop(event) { //拖拽元素被放下时调用事件。防止默认()；var数据=事件。数据传输。获取数据(“Box”)；//将拖拽元素追加到改放置元素中事件。目标。appendchild(文档。getelementbyid(data))；}/script/head body div class= parent div class= container ondragover= handleOndragover(event) ondrop= handleOndrop(event) div class= Box draggable= true id= Box ondragstart= handleOndragstart(event)/div/div class= container ondragover= handleOndragover(event) ondrop= handleOndrop(event)/div/body/html最后
暂时写这么多吧。以上的实例也是用H5写的，并没有使用反应实现。以后再试着写个反应版的简单演示吧。这应该也算是我的第一篇分享文章，希望能坚持下去。
参考链接：
https:///文章/154105.htm
https://www.runoob.com/try/try.php?filename=tryhtml5 _ draganddrop2
到此这篇关于Html5原生拖拽相关事件简介以及基础实现的文章就介绍到这了，更多相关Html5原生拖拽内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。