1、 开启拖放
将将要拖放的对象元素的draggable属性设置为true，任何元素均可实现拖放，但img与a元算（必须制定href）默认允许拖放。
2、与拖放相关的事件
| 事件 | 产生事件的元素 | 描述 |
| dragstart | 被拖放的元素 | 开始拖放操作 |
| drag | 被拖放的元素 | 拖放过程中 |
| dragenter | 拖放过程中鼠标经过的元素 | 被拖放的元素开始进入本元素的范围内 |
| dragover | 拖放过程中鼠标经过的元素 | 被拖放的元素正在本元素的范围内移动 |
| dragleave | 拖放过程中鼠标经过的元素 | 被拖放的元素离开本元素的范围 |
| drop | 拖放的目标元素 | 有其他元素被拖放到本元素中 |
| dragend | 拖放的对象元素 | 拖放操作结束 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function init(){ var source = document.getElementById('dragme'); var dest = document.getElementById("text"); //拖动开始 source.addEventListener("dragstart",function(ev){ //向dataTransfer对象添加数据 var dt = ev.dataTransfer; dt.effectAllowed = "all"; //拖动元素为dt.setData("text/plain",this.id); dt.setData("text/plain","您好"); },false); //拖放结束 dest.addEventListener("dragend",function(ev){ //不执行默认处理(拒绝被拖放) ev.preventDefault(); },false); //drop：被拖放 dest.addEventListener("drop",function(ev){ //从DataTransfer对象那里取得数据 var dt = ev.dataTransfer; var text = dt.getData("text/plain"); dest.textContent += text; //不执行默认处理（拒绝被拖放） ev.preventDefault(); ev.stopPropagation(); },false); } //设置页面属性，不执行默认处理(拒绝被拖放) document.ondragover = function(e){ e.preventDefault(); } document.ondrop = function(e){ e.preventDefault(); } </script> </head> <body onload="init();"> <div id="dragme" draggable="true" style=" 200px;border: 1px solid gray;"> 请拖放 </div> <div id="text" style=" 200px;height: 200px;border: 1px solid gray;"> </div> </body> </html>
针对拖放的目标元素，必须在dragend或dragover事件内调用“事件对象.preventDefault()”方法。因为默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放到其中，必须关闭默认处理。
要实现拖放过程，还必须在目标元素的drop事件中关闭默认处理(拒绝被拖放)，否则拖放处理也不能实现。因为页面实现与其他元素接受拖放的，如果页面上拒绝拖放，那么页面上其他元素就不能接受拖放了。
要实现拖放过程，还必须设定整个页面为不执行默认处理(拒绝被拖放)，否则被拖放处理也不能实现。因为页面是先于其他元素接受拖放的，如果页面上拒绝拖放，那么页面上其他元素不能接受拖放了。
为了让拖放在所有支持拖放API的浏览器中都能正常运行，需要制定"-webkit-user-drag:element"这种Webkit特有的CSS属性。
3、MIME类型
·text/plain：文本文字
·text/html：HTML文字
·text/xml：XML文字
·text/uri-list：URL列表，每个URL为一行
4、js的dataTransfer对象
提供对于预定义的剪贴板格式的访问,以便在拖拽中使用。
| 属性 | 描述 | 参数 |
| dropEffect | 设置或返回拖放目标上允许发生的拖放行为和要显示的光标类型 |
copy 复制样式被显示
link 链接样式被显示
move 移动样式被显示
none 默认,没有鼠标样式被定义
|
| effectAllowed | 设置或返回被拖动元素允许发生的拖动行为与该对象的源元素。 |
copy 选项被复制
link 选项被dataTransfer作为link方式保存
move 当放置时,对象被移动至目标对象
copylink 选项是被复制还是被作为link方式保存关键在于目标对象
linkmove 选项是被作为link方式保存还是被移动关键在于目标对象
all 所有效果都被支持
none 不支持任何效果
uninitialized 默认不能通过这个属性传递任何值
|
| types | 存入数据的种类，字符串的伪数组 | |
| clearData() | 清除DataTransfer对象中存放的数据，如果省略参数format，则清楚全部数据 | |
| setData(format,data) | 将指定格式的数据赋值给dataTransfer对象 | 参数format定义数据的格式也就是数据的类型，data为待赋值的数据 |
| getData(format,data) |
从dataTransfer对象中获取指定格式的数据 | format代表数据格式，data为数据。 |
| setDragImage(Element image，long x,long y) | 用img元素来设置拖放图标(部分浏览器中可以用canvas等其他元素来设置) | element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。 |
effectAllowed定义了在源对象上的操作,可定义在ondragstart事件中。
dropEffect定义了在目标对象上的操作,可定义在ondrop,ondragenter,ondragover事件中。
effectAllowed可以定义all操作,但是dropEffect可以定义copy操作。
5、设定拖放时的视觉效果
DataTransfer对象的dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许设定的值为none、link、move。dropEffect属性所表示的实际视觉效果必须与effectAllowed属性值所表示的允许操作相匹配，规则如下所示：
*如果effectAllowed属性设定为none，则不允许拖放元素。
*如果dropEffect属性设定为none，则不允许拖放元素。
*如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值。
*如果effectAllowed属性设定为具体操作，而dropEffect属性也设定了具体视觉效果，则dropEffect属性值必须与effectAllowed属性值相匹配，否则不允许将被拖放元素拖放到目标元素中。
6、自定义拖放图标
setDragImage(Element image，long x,long y)，第一个参数image是设定拖放图标的图标元素，第二个参数x为拖放图标离鼠标指针的X轴方向的唯一量，第三个参数y为拖放图标离鼠标指针的y轴方向的位移量。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function init(){ var dragIcon = document.createElement("img"); dragIcon.src ='https://www.baidu.com/img/bdlogo.png'; var source = document.getElementById('dragme'); var dest = document.getElementById("text"); source.addEventListener('dragstart',function(ev){ var dt = ev.dataTransfer; dt.setDragImage(dragIcon,-10,-10); dt.effectAllowed = "copy"; dt.setData("text/plain","您好"); },false); dest.addEventListener('dragend',function(ev){ ev.preventDefault(); },false); dest.addEventListener('dragover',function(){ var dt = ev.dataTransfer; dt.dropEffect = "copy"; ev.preventDefault(); },false); dest.addEventListener('drop',function(ev){ var dt = ev.dataTransfer; var text = dt.getData("text/plain"); dest.textContent +=text; ev.preventDefault(); ev.stopPropagation(); },false); } document.ondragover = function(e){ e.preventDefault(); }; document.ondrop = function(e){ e.preventDefault(); } </script> </head> <body onload="init();"> <div id="dragme" draggable="true" style=" 200px;border: 1px solid gray;"> 请拖放 </div> <div id="text" style=" 200px;height: 200px;border: 1px solid gray;"> </div> </body> </html>