设置元素为可拖放
draggable 属性设置为 true: <img draggable="true" />
dataTransfer.setData() 方法设置被拖数据的数据类型和值: function drag(e) { e.dataTransfer.setData("text/html", value); }
ondragover 事件规定在何处放置被拖动的数据。 默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。 event.preventDefault();
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开) 通过 dataTransfer.getData("text/html") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。 function drop(e) { e.preventDefault(); }
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 注释:在 Safari 5.1.2 中不支持拖放。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body { margin: 0; padding: 0; } .drag { width: 50px; height: 50px; background: blue; display: inline-block; margin: 10px; color: white; font-size: 20px; text-align: center; line-height: 50px; cursor: move; } </style> </head> <body> <div class="drag drag1" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">1</div> <div class="drag drag2" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">2</div> <div class="drag drag3" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">3</div> <script type="text/javascript"> var srcEl = null; function drag(e, el) { srcEl = el; e.dataTransfer.setData("text/html", el.innerHTML); } function drop(e, el){ e.preventDefault(); // e.stopPropagation(); if (srcEl != el) { srcEl.innerHTML = el.innerHTML; el.innerHTML = e.dataTransfer.getData("text/html"); } } function allowDrop(e) { e.preventDefault(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body { margin: 0; padding: 0; } #div1 { width: 300px; height: 300px; border: 1px solid red; } #drag1 { width: 300px; height: 300px; } </style> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" draggable="true" ondragstart="drag(event)" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=175152409,3501278703&fm=27&gp=0.jpg" /> <script type="text/javascript"> function drag(e) { e.dataTransfer.setData("text/html", e.target.id); } function drop(e) { e.preventDefault(); e.stopPropagation(); var id = e.dataTransfer.getData('text/html'); e.target.appendChild(document.getElementById(id)); } function allowDrop(e) { e.preventDefault(); } </script> </body> </html>
W3school原文链接:
如对本文有疑问, 点击进行留言回复!!
CSS中的两个特殊值用于控制层叠的inherit和initial的方法
CSS3 input框的实现代码类似Google登录的动画效果
CSS 容器背景 10 种颜色渐变Demo(linear-gradient())
详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
网友评论