标签：
其实所谓的拖放就是拖动那个元素，然后就会打开一个新的页面，根据拖动元素所随带的信息来实现不同的功能。如果没有携带，则有浏览器自己来决定如何做。
<body> <div id="source" style="width:80px;height:80px;border:1px solid black; background-color:#bbb;" draggable="true"> 我不想让你知道我是谁 </div> <script type="text/javascript"> var source = document.getElementById("source"); source.ondragstart = function(evt){ evt.dataTransfer.setData("text/plain" , "http://www.sina.com"); } </script> </body>
-------》在拖动的时候图片上方会显示“禁止”图标。document对象默认阻止了拖动事件，而其他HTML组件也是位于document对象内的，因此它们也不能接受“放”。
所以需要在script代码中添加对于“放”的处理。
通过javascript代码把该元素移动到相应的位置：
<body> <div id="source" style="width:80px;height:80px; border:1px solid black; background-color: #bbb;" draggable="true">疯狂</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>
------->DataTransfer对象
拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象，该对象包含如下属性和方法。
通过DataTransfer对象，可以让拖放操作实现更丰富的功能-----开发者可以在拖放开始时，将拖放源的数据存入DataTransfer对象中，然后在拖放结束时从DataTransfer对象读取数据，这样就可以完成更复杂的拖放操作。
<html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <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 black;"> <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="width:400px;height:260px; border:1px solid black;float:left;"> <h2 ondragleave="return false;">收藏夹</h2> </div> <img id="gb" draggable="false" src="garbagebin.png" alt="垃圾桶" style="float:left;"/> <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>
设置effectAllowed、dropEffect两个属性可以控制施放行为。
effectAllowed用于控制被拖动元素的拖动行为，因此通常建议在ondragstart事件监听器中设置DataTransfer对象的effectAllowed属性；而dropEffect则控制被“放”入的目标组件的行为，因此通常建议在ondragover事件监听器中设置DataTransfer对象的dropEffect属性。
<head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 拖放行为 </title> </head> <body> <div id="source" draggable="true" style="width:80px;height:60px; border:1px solid black;">拖动我</div> <script type="text/javascript"> var source = document.getElementById("source"); var dest = document.getElementById("text"); source.ondragstart = function(evt) { var dt = evt.dataTransfer; // 可设置move、copy等属性值看看效果 dt.effectAllowed = ‘link‘; dt.setData("text/plain", "www.fkjava.org"); } // 允许拖动 document.ondragover = function(e){return false;}; </script> </body>
<html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 拖放行为 </title> </head> <body> <div id="source" draggable="true" style="width:80px;height:60px; border:1px solid black;">拖动我</div> <script type="text/javascript"> var source = document.getElementById("source"); var dest = document.getElementById("text"); var myIcon = document.createElement("img"); myIcon.src = "my.gif"; source.ondragstart = function(evt) { var dt = evt.dataTransfer; // 可设置move、copy等属性值看看效果 dt.effectAllowed = ‘link‘; dt.setDragImage(myIcon , 0 , 0); dt.setData("text/plain", "www.fkjava.org"); } // 允许拖动 document.ondragover = function(e){return false;}; </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/dingchao823/p/4793746.html
