目录

drag简介

> HMTL5提供的支持原生拖拽的实现

兼容性如何?

![](https://img2018.cnblogs.com/blog/958602/201902/958602-20190218193204596-1803532108.png)

桌面端的支持比较好,移动端的支持还是比较差

拖拽流程

1.设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽(文本、图片和链接是默认可以拖放的,它们的draggable属性自动被设置成了true。)
2.监听dragstart,通过DataTransfer设置拖拽数据
3.为拖拽操作设置反馈图标(可选)
4.设置允许的拖放效果,如copy,move,link
5.设置拖放目标,默认情况下浏览器阻止所有的拖放操作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖放.
6.监听drop事件执行所需操作

drag事件

dragstart:在元素开始被拖动时候触发
drag:在元素被拖动时反复触发(可以在此处节流)
dragend:在拖动操作完成时触发
dragenter:当被拖动元素进入目的地元素所占据的屏幕空间时触发
dragover:当被拖动元素在目的地元素内时触发
dragleave 当被拖动元素没有放下就离开目的地元素时触发

DataTransfer对象

> 在进行拖放操作时,DataTransfer 对象用来保存,通过拖放动作,拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型。

e.dataTransfer.files

包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件,此属性是一个空列表。

e.dataTransfer.types

保存一个被存储数据的类型列表作为第一项,顺序与被添加数据的顺序一致。

DataTransfer-MDN

从操作系统拖拽图片到指定区域进行预览

> 从操作系统拖拽文件到浏览器中.不会触发dragstart,dragend,只需取消拖放区域的默认行为,设置反馈,并在拖放发生时取消浏览器默认行为,通过e.dataTransfer.files获取文件信息进行操作

<div id="demo2">
<h3>从文件夹中拖拽图片到下面的区域进行预览</h3>
<ul class="preview"></ul>
<style>
#demo2 {
margin: 20px;
}
#demo2 .preview {
height: 300px;
background: #ddd;
}
#demo2 li {
float: left;
margin-left: 40px;
}
#demo2 img {
max-height: 150px;
width: auto;
}
</style> <script>
(function (w) {
var doc = w.document; var dnd = {
init: function () {
var me = this;
var preview = doc.querySelector('#demo2 .preview'); preview.addEventListener('dragover', function (e) {
e.preventDefault();
}, false); preview.addEventListener('drop', function (e) {
// 操作系统拖放文件到浏览器需要取消默认行为
e.preventDefault(); [].forEach.call(e.dataTransfer.files, function (file) {
if (file && file.type.match('image.*')) {
var reader = new FileReader(); reader.onload = function (e) {
var img = doc.createElement('img');
img.src = e.target.result;
var li = doc.createElement('li');
li.appendChild(img);
preview.appendChild(li);
}; reader.readAsDataURL(file);
}
});
}, false);
} }; dnd.init();
}(window));
</script>
</div> <!-- demo2 -->

drag实例

```

This div is draggable

#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
}

.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}


<h2 id=08>小结</h2>
通过本章的学习,我们更深入的了解到如何使用drag进行拖放,并且通过dataTransfer获取拖放的相应数据。由于该对象的浏览器兼容还存在问题,所以在使用时务必查询的can i use,确保符合项目需求。否则可以选择 mouse事件进行拖拽处理

javaScript drag对象进行拖拽使用详解的更多相关文章

  1. Android Launcher拖拽事件详解【android4.0--Launcher系列二】

    AndroidICS4.0版本的launcher拖 拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一 直 ...

  2. 第一百三十五节,JavaScript,封装库--拖拽

    JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...

  3. javascript:function 函数声明和函数表达式 详解

    函数声明(缩写为FD)是这样一种函数: 有一个特定的名称 在源码中的位置:要么处于程序级(Program level),要么处于其它函数的主体(FunctionBody)中 在进入上下文阶段创建 影响 ...

  4. C#类、对象、方法和属性详解

    C#类.对象.方法和属性详解 一.相关概念: 1.对象:现实世界中的实体(世间万物皆对象) 2.类:具有相似属性和方法的对象的集合 3.面向对象程序设计的特点:封装 继承 多态 4.对象的三要素:属性 ...

  5. JavaScript小实例:拖拽应用(二)

    经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...

  6. javascript小实例,拖拽应用(一)

    前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...

  7. 拖拽系列一、JavaScript实现简单的拖拽效果

        前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

  8. 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

  9. javaScript+html5实现图片拖拽

    源码: <!DOCTYPE html><html><head> <meta charset="utf-8"/> <title& ...

随机推荐

  1. Docker: Harbor一些小知识

    镜像文件上传到私有仓库harbor后,镜像的物理存储位置在哪里? 这些信息记录在docker-compose.yml里,通过观察发现 镜像存储在了宿主机的 volumes: - /data/regis ...

  2. Javascrip 入门第三节课

    一.location对象 location.href 获取当前网页的URLlocation.search() 获取?之后的请求信息 location.href="URL" // 跳 ...

  3. Java MultipartFile 使用记录

    private void file(String path,MultipartFile file){ String separator = "/"; String originFi ...

  4. SpringBoot前端模板

    Springboot支持thymeleaf.freemarker.JSP,但是官方不建议使用JSP,因为有些功能会受限制,这里介绍thymeleaf和freemarker. 一.thymeleaf模板 ...

  5. 【Topcoder 1879】Scheduling

    题意:给一个\(dag\),每一个点有一个访问时间. 现在可以同时访问两个点,但当连向这个点的所有点都被访问完成后才可以访问这个点. 问最短访问时间. 思路:一眼贪心.可惜是错的. 第二眼暴搜.就这么 ...

  6. Hive中知识点

    hive的最新学习资料:http://www.cnblogs.com/qingyunzong/p/8707885.html hive的参数设置大全:https://cwiki.apache.org/c ...

  7. UOJ129 NOI2015 寿司晚宴 数论、状压DP

    传送门 数论题\(n \leq 500\)肯定是什么暴力算法-- 注意到每一个数\(> \sqrt{n}\)的因子最多只有一个,这意味着\(> \sqrt{n}\)的因子之间是独立的,而只 ...

  8. 数据接口测试工具 Postman 介绍

    此文介绍好用的数据接口测试工具 Postman,能帮助您方便.快速.统一地管理项目中使用以及测试的数据接口. 1. Postman 简介 Postman 一款非常流行的 API 调试工具.其实,开发人 ...

  9. 解决Jenkins中执行jmeter脚本后不能发报告(原报告被覆盖、新报告无法保存)的问题

    我没有找到根本原因,但是我用了个取巧的办法: 先将原来的报告移到别的文件夹,执行完jmeter脚本后,再把那些旧报告移回来(也可以不移回来,我这里是为了能从jenkins页面上看).

  10. vue2.0里的路由钩子

    路由钩子 在某些情况下,当路由跳转前或跳转后.进入.离开某一个路由前.后,需要做某些操作,就可以使用路由钩子来监听路由的变化 全局路由钩子: router.beforeEach((to, from, ...