<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>
在整个拖放过程中，我们以上说的是表面现象，事件过程内部还会发生什么事情呢？请看下面👇的DataTransfer对象。
DataTransfer对象
与拖放操作所触发的事件同时派发的对象是DragEvent，它派生于MouseEvent，具有Event与MouseEvent对象的所有功能，并增加了dataTransfer属性。
该属性用于保存拖放的数据和交互信息，返回DataTransfer对象。
// DataTransfer dataTransfer = DragEvent.dataTransferDataTransfer
对象定义的属性和方法有很多种，我们看下列入标准的几个。
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");
浏览器支持程度说了这么多，如果浏览器不支持，也是白扯。
Method of easily dragging and dropping elements on a page, requiring minimal JavaScript.
要求最少的js，实现拖拽页面元素的简单方法
drag之浏览器支持程度–caniuse
原生HTML5拖拽API，drag && drop 在实际工作中，还是有很多情况下会遇到的。
以上，我只介绍了部分常用API。API不复杂，多看会儿，实践就知道了。
各个浏览器，可能会在表现上，稍有不同，但我相信大家还是会向着标准发展的。
https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer
HTML5原生拖拽/拖放 Drag & Drop 详解
拖放的流程对应的事件
