原生JS快速实现拖放（drag and drop）效果

栏目: JavaScript · 发布时间: 5年前

内容简介：拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果：HTML的内容很简单，就是五个空的容器和一个可以被拖拽的元素：

拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果：

HTML

HTML的内容很简单，就是五个空的容器和一个可以被拖拽的元素：

html：

<body>
  <div class="droppable">
    <div class="draggable" draggable="true"></div>
  </div>
  <div class="droppable"></div>
  <div class="droppable"></div>
  <div class="droppable"></div>
  <div class="droppable"></div>
</body>

注意点： 1. 容器的的 class 为 droppable ，用于接收被拖拽的元素，可被拖拽的元素 class 为 draggable ，同时设置 draggable 属性为 true ，表示该元素可以被拖拽。 2. 默认情况下，只有图片、链接还有被选中的文字能被拖拽，其他元素需要设置 draggable 为 true 才能被拖拽。所以为了凸显 draggable 的用法，这里使用 <div> 而不是 <image> 来作为被拖拽的元素。

CSS

在实现样式的时候，除了实现静态的样式，一些过渡状态也需要增加样式以提升视觉体验： 1. 元素被拖动的过程中增加边框等效果； 2. 当元素被拖动到容器上方时，容器也应增加样式表明容器可以接收一个被拖拽的元素。

css：

body {
  background-color: darksalmon;
}

.draggable {
  background-image: url('http://source.unsplash.com/random/150x150');
  position: relative;
  height: 150px;
  width: 150px;
  top: 5px;
  left: 5px;
  cursor: pointer;
}

.droppable {
  display: inline-block;
  height: 160px;
  width: 160px;
  margin: 10px;
  border: 3px salmon solid;
  background-color: white;
}

.dragging {
  border: 4px yellow solid;
}

.drag-over {
  background-color: #f4f4f4;
  border-style: dashed;
}

.invisible {
  display: none;
}

注意点： 1. 图片来源于 https://source.unsplash.com/ 的随机图片； 2. .dragging 为draggable元素正在被拖动的状态，增加黄色border； 3. .drag-over 为draggable元素被拖动到容器上方时容器的状态，增加灰色虚线border。

JS

最后，我们需要通过js监听 draggable 和 droppable 的相关的事件。

js：

// 查询draggable和droppable
const draggable = document.querySelector('.draggable');
const droppables = document.querySelectorAll('.droppable');

// 监听draggable的相关事件
draggable.addEventListener('dragstart', dragStart);
draggable.addEventListener('dragend', dragEnd);

function dragStart() {
  this.className += ' dragging';
  setTimeout(() => {
    this.className = 'invisible';
  }, 0);
}

function dragEnd() {
  this.className = 'draggable';
}

// 监听droppable的相关事件
for (const droppable of droppables) {
  droppable.addEventListener('dragover', dragOver);
  droppable.addEventListener('dragleave', dragLeave);
  droppable.addEventListener('dragenter', dragEnter);
  droppable.addEventListener('drop', dragDrop);
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
  this.className += ' drag-over';
}

function dragLeave(e) {
  this.className = 'droppable';
}

function dragDrop(e) {
  this.className = 'droppable';
  this.append(draggable);
}

注意点： 1. 当draggable元素被拖动时，原来容器中的draggable元素并不会消失，需要我们手动将其隐藏（ class 设置为 invisible ），如果同步操作会立马触发 dragend 事件导致拖动效果消失，所以在 setTimeout 的回调中异步设置可确保拖动操作开始后再隐藏draggable元素； 2. 在 dragEnter 和 dragOver 方法中我们需要通过 preventDefault 来取消事件以表明容器是一个合法的 droppable 元素，不然容器的 drop 事件将无法触发，接下来的操作也将无法进行，详细解释请参考 MDN DropTarget ； 3. 在 dragDrop 方法中直接使用 append 方法将 draggable 元素移动至当前容器下面。

好了，demo比较简单，但是细节还是有一些的，自己实践一下才能更深刻的领悟。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

破茧成蝶：用户体验设计师的成长之路

刘津、李月 / 人民邮电出版社 / 2014-7 / 69.00

市面上已经有很多专业的用户体验书籍，但解决用户体验设计师在职场中遇到的众多现实问题的图书并不多见。本书从用户体验设计师的角度出发，系统地介绍了其职业生涯中的学习方法、思维方式、工作流程等，覆盖了用户体验设计基础知识、设计师的角色和职业困惑、工作流程、需求分析、设计规划和设计标准、项目跟进和成果检验、设计师职业修养以及需要具备的意识等，力图帮助设计师解决在项目中遇到的一些常见问题，找到自己的职业成长......一起来看看《破茧成蝶：用户体验设计师的成长之路》这本书的介绍吧!

码农工具

原生JS快速实现拖放（drag and drop）效果

HTML

html：

CSS

JS

js：

破茧成蝶：用户体验设计师的成长之路

随机密码生成器

HTML 编码/解码

XML、JSON 在线转换