We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改
一个完整的drag and drop流程通常包含以下几个步骤:
以下是拖拽产生的一系列事件,拖拽事件产生时不会产生对应的鼠标事件.
拖拽事件周期中会初始化一个DataTransfer对象,用于保存拖拽数据和交互信息.以下是它的属性和方法.
dropEffect: 拖拽交互类型,通常决定浏览器如何显示鼠标光标并控制拖放操作.常见的取值有copy,move,link和none effectAllowed: 指定允许的交互类型,可以取值:copy,move,link,copyLink,copyMove,limkMove, all, none默认为uninitialized(允许所有操作) files: 包含File对象的FileList对象.从操作系统向浏览器拖放文件时有用. types: 保存DataTransfer对象中设置的所有数据类型. setData(format, data): 以键值对设置数据,format通常为数据格式,如text,text/html getData(format): 获取设置的对应格式数据,format与setData()中一致 clearData(format): 清除指定格式的数据 setDragImage(imgElement, x, y): 设置自定义图标 dataTransfer对象在传递给监听器的事件对象中可以访问,如下:
draggableElement.addEventListener('dragstart', function (event) { event.dataTransfer.setData('text', 'Hello World'); }, false);
详细参考MDN recommended drag type
在页面中选择文本并拖拽,无需处理dragstart设置数据,浏览器自动设置选取的文本.相当于event.dataTransfer.setData("text/plain", "this is text to drag").只需要在拖放目标上读取对应格式的数据即可.
前面介绍了最基本的理论知识,下面进行实际操作
目标: 拖拽元素到达目的区域,改变在DOM中的位置,同时设置反馈视觉效果在线demo
<div id="demo1"> <ul class="panel-list"> <li class="panel-item"></li> <li class="panel-item"></li> <li class="panel-item"></li> <li class="panel-item"></li> <li class="panel-item"></li> </ul> <h2>拖拽下面的方块到上面任意容器中</h2> <!-- 设置draggable使元素成为可拖拽元素 --> <span class="movable" 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获取文件信息进行操作.在线demo
<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 -->
The text was updated successfully, but these errors were encountered:
No branches or pull requests
拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改
drag and drop事件流程
一个完整的drag and drop流程通常包含以下几个步骤:
拖拽事件
以下是拖拽产生的一系列事件,拖拽事件产生时不会产生对应的鼠标事件.
DataTransfer对象
拖拽事件周期中会初始化一个DataTransfer对象,用于保存拖拽数据和交互信息.以下是它的属性和方法.
dropEffect: 拖拽交互类型,通常决定浏览器如何显示鼠标光标并控制拖放操作.常见的取值有copy,move,link和none
effectAllowed: 指定允许的交互类型,可以取值:copy,move,link,copyLink,copyMove,limkMove, all, none默认为uninitialized(允许所有操作)
files: 包含File对象的FileList对象.从操作系统向浏览器拖放文件时有用.
types: 保存DataTransfer对象中设置的所有数据类型.
setData(format, data): 以键值对设置数据,format通常为数据格式,如text,text/html
getData(format): 获取设置的对应格式数据,format与setData()中一致
clearData(format): 清除指定格式的数据
setDragImage(imgElement, x, y): 设置自定义图标
dataTransfer对象在传递给监听器的事件对象中可以访问,如下:
推荐的拖拽元素和数据类型
详细参考MDN recommended drag type
文本
在页面中选择文本并拖拽,无需处理dragstart设置数据,浏览器自动设置选取的文本.相当于event.dataTransfer.setData("text/plain", "this is text to drag").只需要在拖放目标上读取对应格式的数据即可.
链接
实际案例
前面介绍了最基本的理论知识,下面进行实际操作
目标: 拖拽元素到达目的区域,改变在DOM中的位置,同时设置反馈视觉效果在线demo
从操作系统拖拽图片到指定区域进行预览
从操作系统拖拽文件到浏览器中.不会触发dragstart,dragend,只需取消拖放区域的默认行为,设置反馈,并在拖放发生时取消浏览器默认行为,通过e.dataTransfer.files获取文件信息进行操作.在线demo
参考资料
The text was updated successfully, but these errors were encountered: