<!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> <p>哈哈哈哈</p> <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 = "move";//表示应该把拖动的元素移动到放置目标 case "dragenter": case "dragover": EventUtil.preventDefault(event); event.dataTransfer.effectAllowed = "move";//表示值允许"move"的dropEffect break; case "drop": case "dragleave": EventUtil.preventDefault(event); //这里是为了阻止放置事件的默认行为：打开被放到放置目标上的URL droptarget.innerHTML = event.dataTransfer.getData("Text"); } } 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>
以上这篇浅谈js原生拖放就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: