html5拖拽事件，结合javascript

richeneen莳姼

已于 2022-09-01 18:41:16 修改

阅读量727

点赞数 1

文章标签： javascript html5 前端

于 2022-09-01 17:11:47 首次发布

本文链接：https://blog.csdn.net/weixin_53027472/article/details/126631513

版权

本文介绍了HTML5的拖拽事件，包括dragstart、drag、dragend、dragenter、dragover和drop等，详细阐述了如何使用JavaScript实现拖拽效果，并在HTML结构中动态插入被拖拽元素的节点，通过DataTransfer进行数据交互。

摘要由CSDN通过智能技术生成

拖拽事件

1. 什么是拖拽事件？

h5实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽传递数据。拖拽事件是指鼠标按住目标元素，放置到放置元素中。
请添加图片描述

本次案例中，不仅要实现拖拽的动态变化，也要在html结构中实现：在放置元素中插入被放置元素的节点。

拖拽需要有两个事件完成：

拖动事件： dragstart、drag、dragend
放置事件： dragenter、dragover、drop
拖拽事件流:
拖动元素到目标元素上时，事件的发生是有一个顺序的，这就是拖拽事件流：
dragstart(开始拖动)—>drag（正在拖动）---->dragenter（进入目标元素）—>dragover（在目标元素内活动）—>drop（将拖放元素放到目标元素内）—>dragend（拖放结束）

2.如何完成拖拽？

2.1 事件思路

要完成动态的拖拽效果，我们只需根据拖拽事件流给对应的元素设置事件即可。但是要完成拖拽元素在对应的元素中插入节点，需要传输数据。可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例。
方法：setData、getData、clearData

2.2 事件实现代码

先搭建好页面结构及设置样式：

<style>
    .parent{
   
      height: 200px;
      border: 2px solid cyan;
    }
    .child{
   
      width: 100px;
      height: 100px;
      background-color: bisque;
      color: #fff;
      float: left;
      margin: 10px 0 0 10px;
    }
    body{
   
      height: 400px;
    }
  </style>
  <body>
  <!-- 放置元素：parent 放置事件:dragenter dragover drop-->
  <!-- 拖动元素：child 拖动事件:dragstart drag dragend -->
  <div class="parent"></div>
  <!-- 设置当前元素可拖拽 draggable设置当前元素是否可拖拽 默认为false -->
  <div class="child" draggable="true" id="one">one</div>
  <div class="child" draggable="true" id="two">two</div>
  <div class="child" draggable="true" id="three">three</div>
  <div class="child" draggable="true" id="four">four</div>
</body>

事件执行代码：
需要拖拽的元素：

      //获取parent和child
      var parent = document.querySelector('.parent')
      var childs=document.querySelectorAll('.child')
      //将孩子节点转化为数组
      childs=Array.from(childs)
      // 给每个孩子绑定事件
      childs.