HTML5 drag和drop具体使用代码解析

本篇文章小编给大家分享一下HTML5 drag和drop具体使用代码解析，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

简介

拖拽（Drag/Drop）是一个很普遍、很常用的操作，即抓取一个对象后，放到想要放的地方。 在H5中，拖拽是一个标准操作，任何元素都可以拖拽！！ 但是！！ 想要实现拖拽，需要添加 拖拽属性。

H5中拖拽属性：draggable： auto | true | false

注意：链接和图片默认是可拖动的，则不需要 draggable 属性。

- Drag（在拖拽目标时触发事件）

dragstart - 元素开始拖动时触发此事件

drag - 元素正在拖动时触发此事件

dragend - 元素拖动结束后触发此事件

- Drop（在目标区域释放时触发事件）

dragenter - 当被拖动的元素进入目标区域内时触发此事件

dragover - 当被拖动的元素在目标区域内拖动时触发此事件

dragleave - 当被拖动的元素离开目标区域时触发此事件

drop - 当被拖动的元素在目标区域被放下时触发此事件

拖拽步骤

设置元素属性draggable 为 true

  

    

      
左边区域
      
可移动的文字一
      
可移动的文字二
      
可移动的文字三
      
可移动的文字四
      
可移动的文字五
    
    

      
右边区域
    
  

拖动

dragstart 事件： 在进行拖放操作时，通过dataTransfer来实现数据的存储和获取，每个event事件对象中都会有DataTransfer对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。

  let left = document.getElementById('left')
  let target = document.getElementById('right')
  left.addEventListener('dragstart', (event) => {
    const target = event.target;
    // 在项目拖动的开始事件(ondragstart)的时候，可以对dataTransfer进行设值操作(setData)。
    // 拖拽， dataTransfer 属性， 等于运输车
    // 后续用 dataTransfer.getData获取
    // 在项目拖动结束的时，可以获取dataTransfer对象里的值。
    event.dataTransfer.setData('Text', target.id)
    // js 事件有冒泡机制
    console.log('drag开始拖动啦1');
  })

drag事件：在拖拽过程中一直执行

  left.addEventListener('drag', (event) => {
    console.log('drag正在拖啦2');
  })

dragend事件：结束

 left.addEventListener('dragend', (event) => {
    console.log('dragend拖动结束啦7');
  })

放置

dragenter 和dragleave 事件：进入或离开目标区域

  target.addEventListener('dragenter', (event) => {
    console.log('dragenter进入区域啦3')
  })
    target.addEventListener('dragleave', (event) => {
    console.log('dragleave离开拖动区域啦5')
  })

dragover事件：默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，就要阻止元素的默认行为。

  target.addEventListener('dragover', (event) => {
    // 阻止默认行为
    event.preventDefault();
    console.log('dragover在区域内拖动啦4')
  })

drop事件：放下

  target.addEventListener('drop', (event) => {
    console.log('drop释放鼠标啦6')
    let drag_id = event.dataTransfer.getData('text')
    target.appendChild(document.getElementById(drag_id))
  })

完整代码

  
  
    

      
左边区域
      
可移动的文字一
      
可移动的文字二
      
可移动的文字三
      
可移动的文字四
      
可移动的文字五
    
    

      
右边区域