<!DOCTYPE HTML> <html> <meta charset="utf-8"> <title>HTML5图片拖放</title> <head> <style type="text/css"> #div1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;} </style> </head> <body> <p>拖动图片到矩形框中:</p> <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img src="https://www.jb51.net/abao.png" draggable="true" ondragstart="drag(event)"> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { //dataTransfer.setData() 方法设置被拖数据的数据类型和值 //这里数据类型是 "Text"，值是可拖动元素的 id ("drag1") ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </body> </html>
图片来回拖放：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>图片来回拖放</title> <style type="text/css"> div{width: 230px;height: 185px;padding: 10px;float: left;margin-right: 10px;border: 1px solid#ccc;} </style> </head> <body> <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img src="https://www.jb51.net/abao.png" draggable="true" ondragstart="drag(event)"> <script type="text/javascript"> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </body> </html>
dropEffect和effectAllowed属性
利用dataTransfer对象，不光是能够传输数据，还能够通过它来确定被拖动的元素以及作为放置目标的元素能够接收什么操作。这需要访问其两个属性：dropEffect属性和effectAllowed属性。
dropEffect 浏览器会根据不同的值显示不同类型的光标，提升用户放置后的行为。 dropEffect 包括以下几个值:
•"none": 不能把拖动的元素放在这里
•"move": 应该把拖动的元素移动到放置目标
•"copy": 应该把拖动的元素复制到放置目标
•"link":表示放置目标会打开拖动的元素 (但拖动的元素必须是一个链接，有URL)
浏览器仅仅会帮你改变光标的类型，但是要实现怎样的效果都是要开发者自己去实现。
dropEffect属性只有搭配effectAllowed属性才有用，effectAllowed属性表示允许拖动元素的哪种dropEffect行为，它的值有以下几种：
•"uninitialized":没有给被拖动的元素设置任何放置行为。
•"none": 被拖动的元素不能有任何行为
•"copy“：只允许值为 “copy” 的放置行为
•"link":只允许值为 “link” 的放置行为
•"move"：只允许值为 “move” 的放置行为
•"copyLink"： 允许值为 “copy” 和 “link” 的放置行为
•"copyMove"： 允许值为 “copy” 和 “move” 的放置行为
•"linkMove"： 允许值为 “link” 和 “move” 的放置行为
•"all"： 允许所有放置行为
必须在ondragstart事件处理程序中设置effectAllowed属性
Demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My-dropEffect and effectAllowed</title> </head> <body> <a href="https://www.baidu.com">链接到百度</a> <div></div> <div></div> <script type="text/javascript" src="https://www.jb51.net/EventUtil.js"></script> <script type="text/javascript"> var droptarget = document.getElementById("droptarget");//获取放置目标 var link = document.links[0]; //console.log(document.links);//HTMLCollection[a] //console.log(document.links[0]);// <a href="https://www.baidu.com"> function handleEvent(event){ document.getElementById("output").innerHTML += event.type + "<br>"; switch(event.type){ case "dragstart": case "dragend": event.dataTransfer.dropEffect = "link";//表示放置目标会打开拖动的元素。要想使用dropEffect，必须进行相应的设置，这里将其设置为link break; case "dragenter": case "dragover": EventUtil.preventDefault(event); event.dataTransfer.effectAllowed = "link";//表示值允许"link"的dropEffect break; case "drop": case "dragleave": droptarget.innerHTML = event.dataTransfer.getData("url") || event.dataTransfer.getData("text/uri-list"); //event.dataTransfer.getData("url") || event.dataTransfer.getData("text/uri-list");是读取URL } } EventUtil.addHandler(droptarget, "dragenter", handleEvent); EventUtil.addHandler(droptarget, "dragover", handleEvent); EventUtil.addHandler(droptarget, "dragleave", handleEvent); EventUtil.addHandler(droptarget, "drop", handleEvent); EventUtil.addHandler(link, "dragstart", handleEvent); EventUtil.addHandler(link, "dragend", handleEvent); </script> </body> </html>
Demo2: