<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test target</title> <style type="text/css"> #drag{ width:200px; height:200px; background-color: aqua; } .drop{ width: 300px; height: 300px; background-color: antiquewhite; } </style> </head> <body> <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')"> 我可以拖动 </div> <img src="test.jpg"> <div></div> <script type="text/javascript"> document.addEventListener('dragstart',function(event){ event.target.style.backgroundColor = 'red'; event.dataTransfer.setDragImage(document.getElementById('img'),30,30); },false); </script> </body> </html>
拖拽效果通过设置effectAllowed和dropEffect可以指定拖拽效果
事件对象的dataTransfer属性dataTransfer属性是一个DataTransfer对象，在这个属性中保存了拖拽操作过程中的数据，它可能保存一个或者多个数据项。这个属性是只读的。
dataTransfer属性中的标准属性1.dropEffect
得到当前drag and drop操作的类型，或者设置给当前drag and drop 设置新的类型。这个属性可能取值是none，copy，move，link。这属性会影响拖拽过程中的鼠标的显示形式。
2.effectAllowed
这个属性用于指定运行的拖拽操作效果，可选的值有none，all，copy，move，link，copyLink，copyMove，linkMove。默认情况这个值是all，如果要设置这个属性的值就要在dragstart的事件处理程序里进行设置。
3.files
包含了在data transfer中的所有可用的本地文件列表，如果被拖拽操作没有涉及文件，那么它是一个空列表。
4.items
是一个包含了所有拖拽数据的列表。它是一个DataTransferItemList对象。
5.types
它是一个字符串数组，这个数组中包含在dragstart事件处理程序中设置的拖拽事件的类型，如果拖拽操作不存在数据，那么他得到一个空数组。
DataTransfer属性的标准方法1.clearData(type):移除给定类型相关的拖拽数据。接受一个可选的参数，如果这个参数是空或者没有指定，那么移除所以类型的数据，如果指定的类型不存在或者data transfer中不包含数据，那么这个方法不会产生什么影响。
2.getData(type):得到指定类型的拖拽数据。如果指定类型的数据不存在或者data transfer中不包含数据， 得到一个空的字符串。
3.setData(type，value):设置给定类型的拖拽数据。接受两个参数，第一个参数是类型，第二个参数是指定类型的值。 如果这个类型的值不存在，那么在类型列表的最后添加一个新的格式，如果已经存在的,那么在相同的位置 存在的数据被替换.
4.setDragImage(image，xoffset，yoffset):接受三个参数，第一个参数是图片的引用，第二个和第三个参数是移动的图片的 左上角相对鼠标的位置。
DataTransferItemList对象通过dataTransfer.items得到的值就是DataTransferList对象。
DataTransferItemList对象的属性1.length:得到拖拽数据的数量
DataTransferItemList对象的方法1.add()：向拖拽数据列表中添加一个新的拖拽数据，添加成功后返回这个新的拖拽数据。当添加一个文件到拖拽数据列表中，这个方法只接受一个文件对象作为参数。当添加一个给定 类型的字符串到拖拽数据列表中，这个方法接受两个参数，第一个参数是数据，第二个参数是类型。
2.remove(index):从拖拽数据列表中移除指定位置的拖拽数据。这个方法接受一个表示位置的参数，如果这个参数小于0或者大于拖拽数据列表的长度，拖拽数据列表不会发生改变。
3.clear():移除拖拽数据列表中所有的拖拽数据。不需要参数。
4.DataTransferItem(index):得到指定位置上的拖拽数据。接受一个表示位置的参数， 这个方法简写形式是数组索引。
DataTransferItem对象dataTransfer.items中的每一项都是DataTransferItem对象。
DataTransferItem对象的属性1.kind：得到拖拽数据的键，可能的值有file和string
2.type：得到拖拽数据的类型，是MINE type
DataTransferItem对象的方法1.getAsFile():返回拖拽数据的文件对象。如果拖拽数据不是文件则返回null
2.getAsString(function):调用回调函数，这个回调函数将拖拽数据项的字符串形式作为它的参数
拖拽文件要使文件能够被拖放的一个重要步骤是定义一个放置区域。并且为放置区域添加drop，dragover和dragend事件处理程序。
当为一个元素添加drop事件的处理程序，及在dragover事件处理程序中取消浏览器的默认行为，那么这个元素就是放置区域。
另外，在drag和drop操作结束之后，应用程序应该移除拖拽数据（可能是一个或者多个文件），数据的清理通常在 dragend事件处理程序中。
例子一，访问文件名
function drop_handler(ev) { console.log("Drop"); ev.preventDefault(); dt = ev.dataTransfer; if (dt.items) { (var i=0; i < dt.items.length; i++) { if (dt.items[i].kind == "file") { var f = dt.items[i].getAsFile(); console.log("... file[" + i + "].name = " + f.name); } } } else { (var i=0; i < dt.files.length; i++) { console.log("... file[" + i + "].name = " + dt.files[i].name); } } }
例子二，阻止浏览器默认行为
相关文章
精彩导读
热门资讯
关注我们
