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

arashicage 发布于2019-08-30 11:14 / 893人阅读

摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。

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

HTML

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

html：

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

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监听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比较简单，但是细节还是有一些的，自己实践一下才能更深刻的领悟。

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

超融合服务器专线服务原生js效果原生拖放原生js实现拖放效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114861.html

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

摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： showImg(https://s...

objc94 2019-08-02 15:22 评论0 收藏0
原生JS快速实现拖放（drag and drop）效果

摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： showImg(https://s...

jzzlee 2019-08-23 18:15 评论0 收藏0
不在HTML5标准中的特性 —— 浅谈原生拖放

摘要：久等的标准年月日，正式公布了耗时年时间制订的标准。尽管标准在最近才正式公布，但激动人心的特性一早就被开发者热议了。在这份标准当中有一个我们熟悉的身影并没有出现，那就是原生拖放。月日发布的版本当中没有原生拖放。久等的HTML5标准 2014年10月28日，W3C正式公布了耗时8年时间制订的 HTML5 标准。尽管标准在最近才正式公布，但 HTML5 激动人心的特性一早就被开发者热议了。...

littleGrow 2019-08-02 18:06 评论0 收藏0
原生拖拽,拖放事件(drag and drop)

摘要：原生拖拽拖放事件拖拽拖放事件可以通过拖拽实现数据传递达到良好的交互效果如从操作系统拖拽文件实现文件选择拖拽实现元素布局的修改事件流程一个完整的流程通常包含以下几个步骤设置可拖拽目标设置属性实现元素的可拖拽监听设置拖拽数据为拖拽操作设置反馈图原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择...

Sleepy 2019-08-02 18:13 评论0 收藏0
Drag&Drop 拖放API简介以及在React中的实践

摘要：如其他属性及方法，详细可以查看跨终端能力跨终端能力是最大的特点。在指定区域的事件中，通过对象的属性，即可获得文件列表信息，如打印文件名在中实践在项目中使用，依然遵循数据驱动的原则，即事件数据更新。同时，在事件中执行判断。最近有个需求，需要产品导航栏支持拖放。虽然开源社区已有不少成熟的拖放库，但考虑到代码可控性和可定制性，还是自己写吧。选型关于选型，前端实现拖放功能，无外乎几种： 1、通...

lcodecorex 2019-05-23 17:27 评论0 收藏0