HTML5 drag和drop具体使用详解

程序员文章站 2022-06-18 18:56:43

HTML5 drag和drop具体使用详解这篇文章主要介绍了HTML5 drag和drop具体使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧... 21-01-18...

简介

拖拽（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内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

HTML5 drag和drop具体使用详解

简介

拖拽步骤

完整代码

小记

详解HTML5中的拖放事件（Drag 和 drop）

Firefox 3.5 使用 HTML5 Drag and Drop

详解oracle的分表之表分区的具体使用和示例

HTML5 拖放（Drag 和 Drop）详解与实例代码

HTML5 drag和drop具体使用详解

HTML5元素拖拽drag与拖放drop相关API的具体介绍（图文）

Buffer是什么？Buffer如何使用和具体使用场景实例详解

html5的sessionStorage和localStorage详解与使用

HTML5实践-使用css制作时间ICON的具体详解（图）

详解HTML5中的拖放事件（Drag 和 drop）