拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改.
一个完整的drag and drop流程通常包含以下几个步骤:
1.设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽.
2.监听dragstart设置拖拽数据
3.为拖拽操作设置反馈图标(可选)
4.设置允许的拖放效果,如copy,move,link
5.设置拖放目标,默认情况下浏览器阻止所有的拖放操作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖
6.监听drop事件执行所需操作
以下是拖拽产生的一系列事件,拖拽事件产生时不会产生对应的鼠标事件.
1.dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.
2.dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
3.dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
4.dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
5.drag:拖拽期间在被拖拽元素上连续触发
6.drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
7.dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.
拖拽事件周期中会初始化一个DataTransfer对象,用于保存拖拽数据和交互信息.以下是它的属性和方法.
1.dropEffect: 拖拽交互类型,通常决定浏览器如何显示鼠标光标并控制拖放操作.常见的取值有copy,move,link和none
2.effectAllowed: 指定允许的交互类型,可以取值:copy,move,link,copyLink,copyMove,limkMove, all, none默认为uninitialized(允许所有操作)
3.files: 包含File对象的FileList对象.从操作系统向浏览器拖放文件时有用.
4.types: 保存DataTransfer对象中设置的所有数据类型.
5.setData(format, data): 以键值对设置数据,format通常为数据格式,如text,text/html
6.getData(format): 获取设置的对应格式数据,format与setData()中一致
7.clearData(format): 清除指定格式的数据
8.setDragImage(imgElement, x, y): 设置自定义图标
dataTransfer对象在传递给监听器的事件对象中可以访问,如下:
draggableElement.addEventListener('dragstart', function (event) {
event.dataTransfer.setData('text', 'Hello World');
}, false);
在页面中选择文本并拖拽,无需处理dragstart设置数据,浏览器自动设置选取的文本.相当于event.dataTransfer.setData("text/plain", "this is text to drag"),只需要在拖放目标上读取对应格式的数据即可.
前面介绍了最基本的理论知识,下面进行实际操作
目标: 拖拽元素到达目的区域,改变在DOM中的位置,同时设置反馈视觉效果
<div id="demo1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h2>拖拽下面的方块到上面任意容器中</h2>
<!-- 设置draggable使元素成为可拖拽元素 -->
<span id="demo1-src" draggable="true"></span>
<style>
#demo1 {
margin: 20px;
}
#demo1 .panel-list {
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
#demo1 .panel-item {
float: left;
margin-right: 30px;
width: 100px;
height: 100px;
background: #ddd;
border: 1px solid #ddd;
}
#demo1-src {
display: inline-block;
width: 50px;
height: 50px;
background: purple;
}
#demo1 .over {
border: 1px dashed #000;
-webkit-transform: scale(0.8, 0.8);
}
</style>
<script>
(function () {
var dnd = {
// 初始化
init: function () {
var me = this;
me.src = document.querySelector('#demo1-src');
me.panelList = document.querySelector('.panel-list');
// 为拖拽源监听dragstart,设置关联数据
me.src.addEventListener('dragstart', me.onDragStart, false);
// 拖拽鼠标移入元素,在拖放目标上设置视觉反馈
me.panelList.addEventListener('dragenter', me.onDragEnter, false);
// 取消元素dragover默认行为,使其可拖放
me.panelList.addEventListener('dragover', me.onDragOver, false);
// 拖拽移出元素,清除视觉反馈
me.panelList.addEventListener('dragleave', me.onDragLeave, false);
// 鼠标释放,在拖放目标上接收数据并处理
me.panelList.addEventListener('drop', me.onDrop, false);
},
onDragStart: function (e) {
e.dataTransfer.setData('text/plain', 'demo1-src');
},
onDragEnter: function (e) {
if (e.target.classList.contains('panel-item')) {
e.target.classList.add('over');
}
},
onDragLeave: function (e) {
if (e.target.classList.contains('panel-item')) {
e.target.classList.remove('over');
}
},
onDragOver: function (e) {
e.preventDefault();
},
onDrop: function (e) {
var id = e.dataTransfer.getData('text/plain');
var src = document.getElementById(id);
var target = e.target;
if (target.classList.contains('panel-item')) {
target.appendChild(src);
target.classList.remove('over');
}
}
};
dnd.init();
}());
</script>
</div>
从操作系统拖拽文件到浏览器中.不会触发dragstart,dragend,只需取消拖放区域的默认行为,设置反馈,并在拖放发生时取消浏览器默认行为,通过e.dataTransfer.files获取文件信息进行操作.
<div id="demo2">
<h3>从文件夹中拖拽图片到下面的区域进行预览</h3>
<ul></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>
在HTML5还未普及之前,实现元素的拖拽还算是一件比较麻烦的事,大概思路就是监听鼠标移动相关事件,下面是伪代码;HTML5新增了拖放draggable标准,拖拽就变得简单了
如何拖拽图片到指定位置,具体方法如下,在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码
项目中遇到要做一个报表的仪表盘,每一个卡片内是一个报表,报表有不同类型,每一种类型有其特定的尺寸。允许选择报表并添加到仪表盘。允许通过拖拽调整每个卡片位置和卡片的大小
移动端的拖拽有两种主流的实现方案:1. 将元素设置为固定定位,然后在拖拽的时候修改其定位,实现拖拽的效果;2. 使用 transform 中的平移 translate 属性实现拖拽。
最近重读Vue官方文档,在列表的排序过渡这一小节,文档提到,<transition-group> 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下
ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发。首先先介绍一些基本的概念;ng-drop:是否允许放入拖拽元素
在没有drag事件的时候,做元素拖拽使用的都是mouse事件,但mouse在处理过程中可能有这样或那样的问题,主要还是感觉不流畅,如果小伙伴们不在考虑低版本IE(<IE9)的话,可以偿试一下drag,会有意想不到的收获。。
当我们需要对Dom元素进行底层操作的时候,这时候我们就需要使用vue的自定义指令。这篇文章将讲解:如何注册Vue自定义指令?Vue的钩子函数,vue钩子函数参数,vue实现拖拽功能,实现图片加载功能,Vue自定义指令集成第三方插件 ...
上传的时候用到了 axios 的 onUploadProgress 来维护上传进度和当前文件的上传状态,用于开发上传中的样式;上面的 hanldeFiles 调用了 readFiles 方法,这是处理文件的主要逻辑
正巧在之前面试中遇到问实现拖拽效果。当时面试的时候简单回答了实现的方式与逻辑。现在闲来无事,把这个东西实现了一下。原理很简单,写的很方便。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!