初识拖拽

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/02/01/%E5%88%9D%E8%AF%86%E6%8B%96%E6%8B%BD/

摘要

本文主要讲述了：

被拖拽目标
放置目标
示例

正文

被拖拽目标

attribute

draggable

元素是否可被拖拽

注意：

draggable并非布尔特性，而是枚举特性
<a>、<img>以及被选中的文本默认是可被拖拽的
其他元素若可被拖拽，则其子元素（包括文本）将无法被选中

事件

dragstart

开始被拖拽时触发

注意：若从操作系统向浏览器内拖拽文件时，此事件不会触发

drag

正在被拖拽时触发

注意：若从操作系统向浏览器内拖拽文件时，此事件不会触发

dragend

结束被拖拽时触发

注意：若从操作系统向浏览器内拖拽文件时，此事件不会触发

放置目标

事件

dragenter

进入放置目标上方区域时触发

dragover

悬浮于放置目标上方区域时触发

注意：默认情况下，除了input:text和<textarea>，其他元素均不接受被拖拽目标，此时不会触发drop事件而是触发dragleave事件，除非阻止dragover事件的默认行为

dragleave

离开放置目标上方区域时触发

drop

被放置在放置目标上方区域时触发

注意：在 Firefox 中，默认情况下会把页面内的被拖拽目标视作 URL 而进行路由跳转，除非阻止drop事件的默认行为

示例

learn_drag/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script defer src="./js/index.js"></script>
  </head>
  <body>
    <h1>please select some text and drag it into the blue area</h1>
    <a href="https://www.baidu.com/">please drag it into the blue area</a>
    <img
      src="https://www.baidu.com/img/bd_logo1.png"
      alt="please drag it into the blue area"
    />
    <div draggable="true" class="draggable">
      please drag it into the blue area
    </div>
    <div class="droppable"></div>
    <input type="text" placeholder="placeholder" />
    <textarea placeholder="placeholder"></textarea>
  </body>
</html>

learn_drag/css/index.css

.draggable {
  width: 100px;
  height: 100px;
  background-color: #f00;
}
.droppable {
  width: 200px;
  height: 200px;
  background-color: #00f;
}

learn_drag/js/index.js

const draggableElement = document.querySelector('.draggable');
const droppableElement = document.querySelector('.droppable');

draggableElement.addEventListener('dragstart', function (event) {
  console.log('dragstart');
});
draggableElement.addEventListener('dragend', function (event) {
  console.log('dragend');
});
draggableElement.addEventListener('drag', function (event) {
  console.log('drag');
});

droppableElement.addEventListener('dragenter', function (event) {
  console.log('dragenter');
});
droppableElement.addEventListener('dragover', function (event) {
  event.preventDefault();
  console.log('dragover');
});
droppableElement.addEventListener('dragleave', function (event) {
  console.log('dragleave');
});
droppableElement.addEventListener('drop', function (event) {
  console.log('drop');
});