HTML5原生拖拽/拖放(drag & drop)详解

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
拖放的流程对应的事件

我们先看下拖放的流程：
选中  --->  拖动  ---> 释放 
然后，我们一步步看下这个过程中，会发生的事情。
在HTML5标准中，为了使元素可拖动，把draggable属性设置为true。

文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。

图片和链接按住鼠标左键选中，就可以拖放。

文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。
draggable属性：设置元素是否可拖动。

语法：<element draggable="true | false | auto" >
true: 可以拖动
false: 禁止拖动
auto: 跟随浏览器定义是否可以拖动
每一个可拖动的元素，在拖动过程中，都会经历三个过程，拖动开始-->拖动过程中--> 拖动结束。
            <div class="url" id="url">
                <a href="http://weiqinl.com" target="_blank">我是url:http://weiqinl.com</a>
            <img class="img" id="tupian1" src="img1.png" alt="图片1" />
            <img class="img" id="tupian2" src="img2.png" alt="图片2" />
        <div id='target' class="dropabled target">Drop Here</div>
    <script>
        var dragSrc = document.getElementById('txt')
        var target = document.getElementById('target')
        dragSrc.ondragstart = handle_start
        dragSrc.ondrag = handle_drag
        dragSrc.ondragend = handle_end
        function handle_start(e) {
          console.log('dragstart-在元素开始被拖动时候触发')
      function handle_drag() {
            console.log('drag-在元素被拖动时候反复触发')
      function handle_end() {
            console.log('dragend-在拖动操作完成时触发')
        target.ondragenter = handle_enter
        target.ondragover = handle_over
        target.ondragleave = handle_leave
        target.ondrop = handle_drop
        function handle_enter(e) {
            console.log('handle_enter-当元素进入目的地时触发')
            // 阻止浏览器默认行为
            e.preventDefault()
        function handle_over(e) {
            console.log('handle_over-当元素在目的地时触发')
            // 阻止浏览器默认行为
            e.preventDefault()
        function handle_leave(e) {
            console.log('handle_leave-当元素离开目的地时触发')
            // 阻止浏览器默认行为
            // e.preventDefault()
        function handle_drop(e) {
            console.log('handle_drop-当元素在目的地放下时触发')
            var t = Date.now()
            target.innerHTML = ''
            target.append(t + '-拖放触发的事件。')
            e.preventDefault()
    </script>
</body>
</html>
drag-drop事件触发
在整个拖放过程中，我们以上说的是表面现象，事件过程内部还会发生什么事情呢？请看下面👇的DataTransfer对象。
DataTransfer对象
与拖放操作所触发的事件同时派发的对象是DragEvent，它派生于MouseEvent，具有Event与MouseEvent对象的所有功能，并增加了dataTransfer属性。该属性用于保存拖放的数据和交互信息，返回DataTransfer对象。

// DataTransfer dataTransfer = DragEvent.dataTransfer

DataTransfer对象定义的属性和方法有很多种，我们看下列入标准的几个。
types
只读属性。它返回一个我们在dragstart事件中设置的拖动数据格式的数组。 格式顺序与拖动操作中包含的数据顺序相同。IE10+、Edge、safari3.1、Firefox3.5+ 和Chrome4以上支持该属性
files
返回拖动操作中的文件列表。包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件，此属性是一个空列表。
dropEffect
获取当前选定的拖放操作的类型或将操作设置为新类型。它应该始终设置成effectAllowed的可能值之一【none、move、copy、link】。dragover事件处理程序中针对放置目标来设置dropEffect。
effectAllowed
指定拖放操作所允许的效果。必须是其中之一【 none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized】默认为uninitialized 表示允许所有的效果。ondragstart处理程序中设置effectAllowed属性
//IE10及之前版本，不支持扩展的MIME类型名
//Firefox 5版本之前，不能正确的将url和text映射为text/uri-list 和text/plain
var dataTransfer = event.dataTransfer;
//读取文本，
var text = dataTransfer.getData("Text");
//读取URL,
var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");
drag-drop-dataTransfer各属性方法示例
浏览器支持程度
说了这么多，如果浏览器不支持，也是白扯。
Method of easily dragging and dropping elements on a page, requiring minimal JavaScript.

要求最少的js，实现拖拽页面元素的简单方法

drag之浏览器支持程度--caniuse

dataTransfer.items 只有Chrome支持
dropzone属性，目前没有浏览器支持
Firefox支持.setDragImage任何类型的DOM元素。Chrome必须有HTMLImageElement或者任何DOM元素，该DOM元素附加到DOM 和浏览器的.setDragImage视口(viewport)内。

1.部分支持是指不支持dataTransfer.files 或者 .types对象

2.部分支持是指不支持.setDragImage

3.部分支持是指dataTransfer.setData / getData 的有限支持格式
以下，我在实际中遇到的情况，各浏览器对标准的实现还是有差异的。
getData()在chrome 62.0浏览器中，只能在drop事件中生效。
如果使用setDragImage方法，指定的图像不存在，则拖动过程：
safari 11.0.1 浏览器，只会触发dragstart和dragend事件。
chrome、opera 和 Firefox会正常触发其他事件。
每一次拖放操作，Firefox都会执行一次新开一个页面的动作，并且自动搜索dataTransfer.getData()得到的内容。

解决方法，在drop事件中，添加： e.stopPropagation();// 不再派发事件。解决Firefox浏览器，打开新窗口的问题。
opera 49版本中，链接默认不可以拖动，必须把draggable属性设置为true，才可以拖动。
关于 dropEffect 和 effectAllowed 。
effectAllowed 允许拖放操作的效果，最多不会超过那么几种。dropEffect 设置拖放操作的具体效果，只能是四种可能之一。
如果effectAllowed设置为none，则不允许拖放元素。但是各个浏览器能触发的事件不一样。（注意：safari可以拖放元素，而且会触发所有事件）
如果dropEffect设置为none，则不允许被拖放到目的地元素中。
如果设置了effectAllowed的值，那么如果要设置dropEffect的值，其值必须和effectAllowed的值一致，否则拖动效果无效，而且不允许将被拖放元素放到目的地元素中。(注：safari11.0.1有效果，而且也能拖动到目的地元素中，但是这不符合标准)。
drag-drop-dataTransfer各属性方法示例

drag-drop事件触发
原生HTML5拖拽API，drag && drop 在实际工作中，还是有很多情况下会遇到的。

以上，我只介绍了部分常用API。API不复杂，多看会儿，实践就知道了。各个浏览器，可能会在表现上，稍有不同，但我相信大家还是会向着标准发展的。
    感谢您的认真阅读，更多内容请查看:

出处：http://www.cnblogs.com/weiqinl

个人主页http://weiqinl.com

github: weiqinl

简书:weiqinl

您的留言讨论是对博主最大的支持！

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。