简单实现拖拽页面元素

作者: 孙二柯 | 来源:发表于2021-06-27 18:03 被阅读0次

HTML5拖拽drag
简单实现拖拽页面元素
拖拽API
js实现拖拽
HTML5实现拖拽
Vue小商城学习记录
H5拖拽drag
原生拖拽,拖放事件(drag and drop)
js拖拽html元素工具类
拖拽-12.19

首先要给要拖拽的元素增加draggable属性，然后就可以注册以下事件了。

Event	On Event Handler	Fires when…
`drag`	`ondrag`	…a dragged item (element or text selection) is dragged.
`dragend`	`ondragend`	…a drag operation ends (such as releasing a mouse button or hitting the Esc key; see Finishing a Drag.)
`dragenter`	`ondragenter`	…a dragged item enters a valid drop target. (See Specifying Drop Targets.)
`dragexit`	`ondragexit`	…an element is no longer the drag operation's immediate selection target.
`dragleave`	`ondragleave`	…a dragged item leaves a valid drop target.
`dragover`	`ondragover`	…a dragged item is being dragged over a valid drop target, every few hundred milliseconds.
`dragstart`	`ondragstart`	…the user starts dragging an item. (See Starting a Drag Operation.)
`drop`	`ondrop`	…an item is dropped on a valid drop target. (See Performing a Drop.)

简单的demo如下：

<!--
 * @Author: sunxy
 * @Date: 2021-06-27 13:42:03
 * @LastEditors: sunxy
 * @LastEditTime: 2021-06-27 17:51:00
 * @Description:  拖拽功能
 * @FilePath: /feir/cli/src/draggable.html
-->

<!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>
    .empty {
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div> 拖拽到下面的盒子</div>
  <div class="empty"></div>
  <img draggable="true" src="./images/img.png" />
</body>
<script>
  // drag event
  /**
   *  开始 dragstart   进入时 dragenter
   *  进行中 drag       进入后 dragover
   *  结束  dragend     离开 dragover   放置 drop
   */
  const empty = document.querySelector('div.empty')
  document.addEventListener('dragstart', e => {
    // 开始拖动的时候给添加红色边框
    e.target.style.border = '1px dashed red'
  }, false)
  document.addEventListener('dragend', e => {
    // 结束拖动的时候 取消边框
    e.target.style.border = 'none'
  }, false)

  empty.addEventListener('dragenter', e => {
    e.preventDefault()
    e.target.style.border = '1px dashed green'
    // 进入的时候 添加元素
    e.target.appendChild(document.querySelector('img'))
  }, false)
</script>

</html>