如图片:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>可拖拽的元素组件</title> <style> #d1 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;} #d2 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;} </style> </head> <body> <div id="d1"> <img id="myimg" src="https://www.baidu.com/img/baidu_jgylogo3.gif" /> </div> <div id="d2"></div> <script> //获取图片及两个div元素 var d1 = document.getElementById("d1"), myimg = document.getElementById("myimg"), d2 = document.getElementById("d2");
//给图片绑定dragstart事件 myimg.addEventListener("dragstart",MyDragStart); //给第二个div绑定dragover,drop两个事件 d2.addEventListener("dragover",MyDragover); d2.addEventListener("drop",MyDrop);
//给第一个div绑定dragover,drop两个事件 d1.addEventListener("dragover",MyDragover); d1.addEventListener("drop",MyDrop); //图片开始拖拽事件的处理函数 function MyDragStart(event){ var mydata = myimg.id;//保存ID值 var trans = event.dataTransfer; trans.setData("text",mydata); }
//该处理函数是为阻止页面的默认行为 function MyDragover(){ event.preventDefault(); }
//drop处理函数 function MyDrop(event){ // var trans = event.dataTransfer;//获取数据保存对象 var mysrc = trans.getData("text");//图片id var ele = document.getElementById(mysrc);//获取到图片对象 if (ele != event.srcElement)//判断图片是否移动 { event.srcElement.appendChild(ele.parentNode.removeChild(ele));//将img元素剪切到目标div中 } trans.clearData("text");//清除数据 } </script> </body> </html>
http://www.cnblogs.com/Medeor/p/4963321.html
原文:http://www.cnblogs.com/xiangsj/p/6346574.html