原生JS快速实现拖放实例效果与解析

最新推荐文章于 2023-03-02 16:28:36 发布

web前端开发V

最新推荐文章于 2023-03-02 16:28:36 发布

阅读量231

点赞数

来源 | https://segmentfault.com/a/1190000019554950

放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生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和droppableconst 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比较简单，但是细节还是有一些的，自己实践一下才能更深刻的领悟。

完整示例演示：https://codepen.io/mudontire/pen/Kjmzzp