HTML5 drag和drop具体使用详解

简介

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

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

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

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

• dragstart - 元素开始拖动时触发此事件
• drag - 元素正在拖动时触发此事件
• dragend - 元素拖动结束后触发此事件

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

• dragenter - 当被拖动的元素进入目标区域内时触发此事件
• dragover - 当被拖动的元素在目标区域内拖动时触发此事件
• dragleave - 当被拖动的元素离开目标区域时触发此事件
• drop - 当被拖动的元素在目标区域被放下时触发此事件

拖拽步骤

设置元素属性draggable 为 true

  main class="main">
        div class="left" id="left">
          div class="txt-show">
    左边区域/div>
          div class="dargable txt" id="txt1" draggable="true">
    可移动的文字一/div>
          div class="dargable txt" id="txt2" draggable="true">
    可移动的文字二/div>
          div class="dargable txt" id="txt3" draggable="true">
    可移动的文字三/div>
          div class="dargable txt" id="txt4" draggable="true">
    可移动的文字四/div>
          div class="dargable txt" id="txt5" draggable="true">
    可移动的文字五/div>
        /div>
        div class="right" id="right">
          div class="txt-show">
    右边区域/div>
        /div>
      /main>
    

拖动

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))  }
    )

完整代码

!DOCTYPE htML>
    html lang="en">
    head>
      meta charset="UTF-8">
      meta name="viewport" content="width=device-width, inITial-scale=1.0">
      title>
    Document/title>
      style>
    .main {
          display: flex;
          justify-content:space-around;
    }
    .left {
          width: 300px;
          height: 500px;
          border: 1px solid lightseagreen;
          margin-right: 10px;
          /* background-color: green;
 */    }
    .right {
          width: 300px;
          height: 500px;
          border: 1px solid lightseagreen;
          text-align: center;
          padding: 1px;
          /* background: red;
 */    }
    .txt {
          border: 1px solid gray;
          margin: 1px;
          padding: 5px;
          cursor: move;
    }
      /style>
    /head>
    body>
      main class="main">
        div class="left" id="left">
          div class="txt-show">
    左边区域/div>
          div class="dargable txt" id="txt1" draggable="true">
    可移动的文字一/div>
          div class="dargable txt" id="txt2" draggable="true">
    可移动的文字二/div>
          div class="dargable txt" id="txt3" draggable="true">
    可移动的文字三/div>
          div class="dargable txt" id="txt4" draggable="true">
    可移动的文字四/div>
          div class="dargable txt" id="txt5" draggable="true">
    可移动的文字五/div>
        /div>
        div class="right" id="right">
          div class="txt-show">
    右边区域/div>
        /div>
      /main>
      script>
      let left = document.getElementById('left')  let target = document.getElementById('right')  left.addEventListener('dragstart', (event) =>
 {
        event.dataTransfer.setData('Text', target.id)    console.log('drag开始拖动啦1');
  }
    )  target.addEventListener('dragstart', (event) =>
 {
        const target = event.target;
     event.dataTransfer.setData('Text', target.id)  }
    )  left.addEventListener('drag', (event) =>
 {
        console.log('drag正在拖啦2');
  }
    )  left.addEventListener('dragend', (event) =>
 {
        console.log('dragend拖动结束啦7');
  }
    )  target.addEventListener('dragenter', (event) =>
 {
    console.log('dragenter进入区域啦3')  }
    )  target.addEventListener('dragover', (event) =>
 {
        event.PReventDefault();
    console.log('dragover在区域内拖动啦4')  }
    )  left.addEventListener('dragover', (event) =>
 {
        event.preventDefault();
  }
    )  target.addEventListener('dragleave', (event) =>
 {
    console.log('dragleave离开拖动区域啦5')  }
    )  target.addEventListener('drop', (event) =>
 {
    let drag_id = event.dataTransfer.getData('text')    target.appendChild(document.getElementById(drag_id))  }
    )  left.addEventListener('drop', (event) =>
 {
    let drag_id = event.dataTransfer.getData('text')    left.appendChild(document.getElementById(drag_id))  }
    )  /script>
    /body>
    /html>
    

小记

dragstart事件中通过dataTransfer来实现数据的存储和获取，每个event事件对象中都会有DataTransfer对象用来保存被拖动的数据。在项目拖动的开始事件(ondragstart)的时候，可以对dataTransfer进行设值操作(setData)。event.dataTransfer.setData() 进行设值，在拖动结束后，可以通过event.dataTransfer.getData()获取dataTransfer对象里的值。

浏览器默认无法将数据/元素放置到其他元素中，如果需要设置允许放置，就要阻止元素的默认行为。通过event.preventDefault()阻止。

可以通过添加css样式进行对拖拽效果的改变。例：dragSrc.classList.add('ds') 。使用classList在元素中添加，移除及切换 CSS 类，classList 属性是只读的，但可以使用 add() 和 remove() 方法修改它。

使用 appendChild() 方法移除元素到另外一个元素。

HTML Drag and Drop API

DataTransfer()

HTML DOM appendChild() 方法

HTML DOM addEventListener() 方法

到此这篇关于HTML5 drag和drop具体使用详解的文章就介绍到这了,更多相关HTML5 drag和drop内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！