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

时间 2019-11-06

标签原生快速实现拖放 drag drop 效果栏目 JavaScript 繁體版

原文原文链接

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

HTML

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

html：app

<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. 当元素被拖动到容器上方时，容器也应增长样式代表容器能够接收一个被拖拽的元素。dom

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的相关的事件。this

js：url

// 查询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比较简单，可是细节仍是有一些的，本身实践一下才能更深入的领悟。spa

完整示例：https://codepen.io/mudontire/...code