【js练习】draggable属性和dataTransfer对象

来源：互联网发布：个人软件开发合同书编辑：程序博客网时间：2024/05/22 00:08

首先说下HTML5里新增的draggable属性

在html5中，默认<img.../>和设置了href的<a>是可拖动的，其他都需手动把元素的draggable属性设置为true

然后使元素携带数据应该为被拖动元素的ondragstart（开始拖动触发该事件）事件指定监听器，在监听器中让拖动操作可以携带数据。

之后为了让document接受放的动作，为documen的ondragover事件设定监听器，在监听器中取消document对拖动事件的默认行为。

然而，不同浏览器在元素拖到指定位置释放之后默认的动作是不同的（firefox释放后会跳转到新页面，chrome则没有任何动作），所以

我们要取消拖放操作的默认动作，为document的ondrop绑定监听器

例如，一个允许自由拖动的div:

<span style="font-family:Microsoft YaHei;font-size:12px;"><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html" charset="utf-8"/><title>可拖动</title><style type="text/css">#source{border: 1px solid #000000;background-color: #ccc;width: 80px;height: 80px;}</style></head><body><div id="source">HELLO WORLD。</div><script type="text/javascript">var source = document.getElementById("source");source.ondragstart = function(evt){//让拖动携带数据evt.dataTransfer.setData("text/plain","www.fkjava.org");}document.ondragover = function(evt){//取消事件的默认行为return false;}document.ondrop = function(evt){source.style.position = "absolute";source.style.left = evt.pageX + "px";source.style.top = evt.pageY + "px";//取消事件的默认行为return false;}</script></body></html></span>

附：触发事件

ondragstart：开始拖动时触发

ondrag：拖动过程中不断触发

ondragend：拖动结束时触发

ondragenter：被拖动元素进入本元素的范围内时触发

ondragover：被拖动元素进入本元素的范围内拖动时不断触发

ondragleave：被拖动元素离开本元素时触发

ondrop：其他元素被放到了本元素时触发

再来说下DataTransfer对象

拖放触发的拖放事件有一个dataTransfer的属性，该属性值是一个DataTransfer对象

对象属性:

dataTransfer.dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一。
dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
dataTransfer.items:该属性返回DataTransferItems对象，该对象代表了拖动数据。
dataTransfer.setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图表，x，y分别为鼠标水平方向和竖直方向的距离。
dataTransfer.addElement（element）：添加自定义图标。
dataTransfer.types:该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。
dataTransfer.getData(ormat)：获取DataTransfer对象中format格式的数据
dataTransfer.setData(format，data)：向DataTransfer对象中设置format格式的数据。
dataTransfer.clearData([format]):清除DataTransfer对象中format格式的数据，如果省略format，则清楚全部数据。

下面展示一个允许通过拖动来添加，删除”收藏夹“功能

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html" charset="utf-8"/><title>通过拖动实现添加删除</title><style type="text/css">div>div{display: inline-block;padding: 10px;background-color: #aaa;margin: 3px;}</style></head><body><div style="width:600px;border:1px solid #ccc;"><h2>可以将喜欢的项目拖进收藏夹</h2><div draggable="true" ondragstart="dsHandler(event);">疯狂JAVA联盟</div><div draggable="true" ondragstart="dsHandler(event);">疯狂软件教育</div><div draggable="true" ondragstart="dsHandler(event);">源于我们</div><div draggable="true" ondragstart="dsHandler(event);">疯狂成员</div></div><div id="dest" style="widh:400px;height:400px;border:1px solid #ccc;float:left;"><h2 ondragleave="return false;">收藏夹</h2></div> <div id="gb" draggable="false" style="width:100px;height:100px;border:1px solid red;float:left;">我是垃圾桶</div><script type="text/javascript">                     var dest = document.getElementById("dest");//开始拖动事件的事件监听器 var dsHandler = function(evt){ //将被拖动元素的innerHTML属性值设置成被拖动的数据 evt.dataTransfer.setData("text/plain", "<item>" + evt.target.innerHTML); }       dest.ondrop = function(evt){ var text = evt.dataTransfer.getData("text/plain"); //如果text以<item>开头 if(text.indexOf("<item>") == 0){ //创建一个新DIV元素 var newEle = document.createElement("div"); //以当前时间为该元素生成一个唯一的ID newEle.id = new Date().getUTCMilliseconds();  //该元素内容为“拖”过来的数据 newEle.innerHTML = text.substring(6); //该元素允许拖动 newEle.draggable = "true"; //为该元素的开始拖动事件指定监听器 newEle.ondragstart = function(evt){ //将被拖动元素的id属性设置成被拖动的数据 evt.dataTransfer.setData("text/plain","<remove>"+newEle.id); } dest.appendChild(newEle); } } //当被拖动元素放到垃圾桶上触发该方法 document.getElementById("gb").ondrop = function(evt){ var id = evt.dataTransfer.getData("text/plain"); //如果id以<remove>开头 if(id.indexOf("<remove>") == 0){ //根据拖过来的数据，获取被拖动的元素 var target = document.getElementById(id.substring(8)); //删除被拖动的元素 dest.removeChild(target); } } document.ondragover = function(evt){ //取消事件的默认行为 return false; } document.ondrop = function(evt){ //取消事件的默认行为 return false; }</script></body></html>

0 0