您现在的位置是：首页 > 文章详情

JavaScript- 元素拖拽

日期：2019-05-07点击：443收藏

利用元素的DnD事件(Drag and Drop)，实现拖放源与拖放目标之间的数据传输：以下是一个示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript实现元素拖动</title> <style> *{ margin: 0; } #app{ width: 100vw; height: 100vh; background: #9acfea; /*position: relative;*/ } #content{ width: 200px; height: 100px; font-size: 20px; line-height: 100px; text-align: center; /*position: fixed;*/ background: #ff6700; border-radius: 10px; cursor: pointer; } #drag_target{ width: 300px; height: 300px; position: absolute; background: #1296db; top: 30px; left: 300px; padding: 10px; } </style> </head> <body> <div id="app"> <div id="content" data-type="0"></div> <div id="drag_target" data-type="0"></div> </div> <script type="text/javascript"> let content = document.getElementById("content"); let drag_target = document.getElementById("drag_target"); content.innerHTML = new Date().toLocaleString(); content.draggable = true; content.ondragstart = function (ev) { console.log(ev); let dt = ev.dataTransfer; dt.effectAllowed = "move"; dt.setData("text",ev.target.id); // dt.setDragImage(img,0,0); }; drag_target.ondrop = function(ev){ console.log("drap..."); ev.preventDefault(); let data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }; drag_target.ondragover = function(ev){ ev.target.style.borderRadius = "20px"; ev.target.style.border = "solid 1px #ff6700"; ev.preventDefault(); ev.dataTransfer.dropEffect = "move" }; </script> </body> </html>