拖动事件小解
首先，要想拖动元素,首先得设置draggable= "true"
适用范围:默认图片和链接是可拖动的，无需添加
兼容性: Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari
eg: <img id= "aa" src="img/aHead.png" draggable="true" ondragstart="drag(event)" alt=""/>
相关方法:
在拖动目标上触发的方法:
ondragstart:开始拖动对象
ondrag:拖动过程中(每隔350ms触发一次)
ondragend:拖动结束(未释放成功就不会触发！)
在释放目标上触发的方法:
ondragenter:对象进入释放目标(超过一半进入触发)
ondraghover:对象在释放目标内移动(每隔350ms触发一次)
ondragleave:对离开释放目标(超过一半离开触发)
ondrop:释放对象(ondrop在线，ondragend在后)
实例:
源代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .droptarget { float: left; width: 100px; height: 35px; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; } </style> </head> <body> <p>在两个矩形框中来回拖动 p 元素:</p> <div class="droptarget"> <p draggable="true" id="dragtarget">拖动我!</p> </div> <div class="droptarget"></div> <p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p> <p id="demo"></p> <script> /* 拖动时触发*/ document.addEventListener("dragstart", function(event) { //dataTransfer.setData()方法设置数据类型和拖动的数据 event.dataTransfer.setData("Text", event.target.id); // 拖动 p 元素时输出一些文本 document.getElementById("demo").innerHTML = "开始拖动 p 元素."; //修改拖动元素的透明度 event.target.style.opacity = "0.4"; }); //在拖动p元素的同时,改变输出文本的颜色 document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // 当拖完p元素输出一些文本元素和重置透明度 document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "完成 p 元素的拖动"; event.target.style.opacity = "1"; }); /* 拖动完成后触发 */ // 当p元素完成拖动进入droptarget,改变div的边框样式 document.addEventListener("dragenter", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted red"; } });
拖动事件MouseEvent()内有dataTransfer属性
属性如下:
解析如下:
属性:
effectAllowed: 规定元素被拖动时允许的效果，在ondragstart中设置
1.copy 复制
2.move 移动
3.link 建立一个源位置到新位置的链接
4.copyLink:复制或链接
5.copyMove
6.linkMove
7.all: 所有操作
8.none: 禁止所有
9.uninitialized:缺省值(默认值)相当于all
----------------------------------------------------------------------------------------------------------------
dropEffect:规定元素被拖进当前放入元素时的效果，可在ondragenter或ondraghover中设置
1.copy 2.move 3.link 4.none(禁止放置)
----------------------------------------------------------------------------------------------------------------
items:该属性返回DataTransferItems对象，该对象代表了拖动数据。
---------------------------------------------------------------------------------------------------------------
types:该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。
主要方法:
setData(format,data):
功能:将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据
说明:format: IE只允许"text"或"URL"两种类型，html5允许所有MIME类型，也支持"text"和"URL",考虑到ff的兼容性，设置时"text"写做"Text"，"URL"大写，读取文本时用"Text",读取url时检测"url"和"URL"
在拖动文本或链接时，浏览器会调用此方法，将文本以"text"形式存储于dataTransfer对象，将链接以"url"形式存储于dataTransfer对象
只能在ondrop中读取
若没有放置成功,DataTransfer会自行销毁！
getData(format):从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据
clearData([format]):从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据。
addElement(element):添加自定义图标
setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
相关问题:
ondragend坐标:
最初以为在此事件中，光标位置与ondrop一致，后来在实践中发现其位置的x,y轴坐标远大于ondrop事件的光标坐标！
ondrop兼容性:
兼容chrome，firefox，不兼容Safari5.1.2以下！(本人一直使用5.1.7，发现除了ondrop以外其他事件在低版本中均支持，当我用window下载5.3时发现下下来的依旧是5.1.7！，这是匪夷所思之处，而且根据这点可确定ondrop在5.1.7中依旧不支持)
拖动失效:
一般情况下是因为 ondragenter与ondragover事件没有加上preventDefault(),因为拖拽的默认行为时打开新链接，加上后还能让chrome浏览器拖拽光标不再是禁止符号，
当拖动对象非图片，链接时，Safari，firefox上均有可能失效，
解决方法: safari: 给当前拖动对象 加上-webkit-user-drag: element;
firefox: 在ondragstart事件中，调用setData方法给dataTransfer加入数据 eg: event.dataTransfer.setData('Text', 1);
拖拽对象为图片，拖拽时图片变小:
当拖拽对象为图片，拖动它时，随着光标的虚影会变小，这时建议不要将拖动对象设为图片，而将图片作为一个div的背景，将此div设为拖拽对象,并将其draggable属性设为true
