基于JavaScript 实现拖放功能


Posted in Javascript onSeptember 12, 2019

HTML 的拖放 API 依赖 DOM 事件模型,获取拖放和放置元素的相关信息,以此实现拖放功能。我们只需要注册很少几个事件监听器,就能把任何元素变成可拖动或可放置的。

拖放 API 除了提供基本的拖放功能接口外,还可以在拖放之外提供选择,用来自定义行为。比如,可以修改拖放元素的 CSS 样式。或者,我们不移动元素,拖动的时候,复制一个副本,拖放结束后,我们就会多了一个同样的元素。

本篇只介绍实现基本的拖放功能。

将元素设置成可拖动的

我们先从拖动元素开始。假设我们有一个容器元素,其中包含两种类型的子元素:可拖动元素和可放置元素。举个例子,如果我们有一个待办事项列表,我们可以将待办事项拖到“完成”区域。

简单起见,我们将移动的元素称为拖动元素,将拖动元素移入的目标元素称为 dropzone。

<div class='parent'>
 <span id='draggableSpan'>
  draggable
 </span>
 <span> dropzone </span>
</div>

基于JavaScript 实现拖放功能

这是我们的第一段代码,子元素现在还 不能 拖动。

下面给拖动元素添加属性 draggable='true' ,将它设置成一个可拖动元素。

<div class='parent'>
 <span id='draggableSpan' draggable='true'>
  draggable
 </span>
 <span> dropzone </span>
</div>

基于JavaScript 实现拖放功能

现在你再用鼠标拖动拖动元素的时候,它就会跟随鼠标移动(对不起,移动端不行:see_no_evil:)。

draggable 属性在没设置的情况下,默认值 auto 。就是说,元素是可不可以拖动,取决于浏览器的默认设置。比如,链接( <a> )默认就是可拖动的,而 <span> 就不是。

拖放事件处理器

到目前为止,如果我们拖动元素,释放鼠标,什么事都不会发生。拖动和放置都会触发事件,实现一个基本的拖放功能,我们最少需要用到拖放 API 中的三个事件:

ondragstart
ondragover
ondrop

学会使用 ondragstartondragoverondrop 事件只是个开始。拖拽过程一共会涉及八个事件: ondragondragendondragenterondragexitondragleaveondragoverondragstartondrop

DataTransfer

DataTransfer 接口中保存了与当前拖放过程相关的跟踪信息,信息从 DataTransfer 对象属性中获得,而 DataTransfer 对象又是从 DOM 事件对象中获得的。

技术上讲, DataTransfer 接口可以同时跟踪多个拖动对象的信息,我们这里只关注拖动一个元素的情况。:sparkles:

拖动时更新元素

下一步,我们开始设置 ondragstart 的事件处理器。

拖动开始时,我们可以在 ondragstart 处理器中,做任何想做的修改。比如更新拖动元素的 CSS 样式,将拖动的版本设置为临时图片,或者其他能从 DOM 事件中访问到的任何内容。

dataTransfer 对象的 setData 属性可以用来设置拖动状态信息。它接收两个参数,第一个参数是表示内容格式的字符串,第二个参数是实际传递的数据。

我们要实现的功能是将拖动元素移动到一个新的父元素里面。我们需要获取拖动元素,因此需要将拖动元素的 ID 通过 setData 属性保存下来:

function onDragStart(event) {
 event
  .dataTransfer
  .setData('text/plain', event.target.id);
}

再从事件对象中获得拖动元素并设置 CSS 样式:

function onDragStart(event) {
 event
  .dataTransfer
  .setData('text/plain', event.target.id);

 event
  .currentTarget
  .style
  .backgroundColor = 'yellow';
}

注意:如果上面的黄色背景样式,你只希望在拖动时才应用,那么拖动结束后,就要手动将样式恢复。就会说,拖动开始时,如果修改了元素样式,除非再次修改过来,否则样式是不会自动恢复的。:rainbow:

拖动开始时的处理函数写好了,现在将它设置给可拖动元素的 ondragstart 属性:

<div class='parent'>
 <span id='draggableSpan'
  draggable='true'
  ondragstart='onDragStart(event);'>
   draggable
 </span>

 <span> dropzone </span>
</div>

下面是使用鼠标拖动时的效果:

基于JavaScript 实现拖放功能

现在拖动元素, ondragstart 中的代码就会执行,样式改变了,但释放拖动元素后,什么事情都没发生。接下来我们将视线转移到 dropzone 上来。

设置元素为可放置的

ondragstart 之后,下一个要写的处理函数就是 ondragover 了。上面讲过,放置行为默认是被浏览器阻止的,我们需要取消这个默认行为,双重否定为肯定,对吧?

function onDragOver(event) {
 event.preventDefault();
}

在阻止浏览器干扰后,现在就能将拖动元素添加到 dropzone 了,dropzone 成为能够接受任何拖动元素的容器元素。

<div class='parent'>
 <span id='draggableSpan'
  draggable='true'
  ondragstart='onDragStart(event);'>
   draggable
 </span>

 <span ondragover='onDragOver(event);'>
  dropzone
 </span>
</div>

即便现在 dropzone 可以接受拖动元素,释放鼠标后还是看不见改变发生。

放置的时候要做什么?

现在要介绍第三个也是最后一个处理函数 ondrop

我们的函数逻辑遵循以下步骤:

  • 还记得在 setData 中设置的数据吗?
  • 现在我们需要从 dataTransfer 对象的 getData 属性中获取设置的数据,数据内容是拖动元素的 ID,它会返回给我们。
  • 使用上一步获取的 ID,获得拖动元素。 获取 dropzone 元素。
  • 将拖拽元素 append 到 dropzone 中。
  • 清理 dataTransfer 对象中保存的数据。
function onDrop(event) {
 const id = event
  .dataTransfer
  .getData('text');

 const draggableElement = document.getElementById(id);
 const dropzone = event.target;
 
 dropzone.appendChild(draggableElement);

 event
  .dataTransfer
  .clearData();
}

因为这是我们要写的第三个也是最后一个函数,我们只要将它传递给 dropzone 的 ondrop 属性,就完成了一个完整的拖放功能!

<div class='parent'>
 <span id='draggableSpan'
  draggable='true'
  ondragstart='onDragStart(event);'>
   draggable
 </span>

 <span
  ondragover='onDragOver(event);'
  ondrop='onDrop(event);'>
   dropzone
 </span>
</div>

基于JavaScript 实现拖放功能

这里写的示例是最基本的,它展示如何使页面上的任何内容可变得可拖动。当然,一个网页里可以同时包含多个可拖动元素、多个 dropzone,或者使用文本没有介绍的其他事件做更加细粒度的自定义设置。

下面展示的是本文一开始提到的那个简单的待办事项列表功能。:fire:

基于JavaScript 实现拖放功能

只要依据本文上面已经讲过的内容,稍微变通一下,就能写出来。只要确保这里可拖动待办项目的 ID 是唯一的就行了。

总结

以上所述是小编给大家介绍的基于JavaScript 实现拖放功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于jquery的3d效果实现代码
Mar 23 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
JavaScript类的写法
Sep 17 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 #Javascript
layui 对table中的数据进行转义的实例
Sep 12 #Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 #Javascript
小程序如何支持使用 async/await详解
Sep 12 #Javascript
layui清空,重置表单数据的实例
Sep 12 #Javascript
layui table 多行删除(id获取)的方法
Sep 12 #Javascript
详解Vue中CSS样式穿透问题
Sep 12 #Javascript
You might like
JQuery的一些小应用收集
2010/03/27 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
Vue常用指令详解分析
2018/08/19 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
python错误处理详解
2014/09/28 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
解决Django中多条件查询的问题
2019/07/18 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
用Python制作音乐海报
2021/01/26 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
质量整改报告范文
2014/11/08 职场文书
单位实习鉴定评语
2015/01/04 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang