基本情况
在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。
拖拽元素
页面中设置了draggable="true"属性的元素
目标元素
任意元素都能成为目标元素
事件监听
//拖拽元素 ondrag //应用于拖拽元素，整个拖拽过程都会调用 ondragstart //应用于拖拽元素，当拖拽开始时调用 ondragleave //应用于拖拽元素，当鼠标离开拖拽元素时调用 ondragend //应用于拖拽元素，当拖拽结束时调用
//目标元素 ondragenter //应用于目标元素，当拖拽元素进入时调用 ondragover //应用于目标元素，当停留在目标元素上时调用 ondrop //应用于目标元素，当在目标元素上松开鼠标时调用 ondragleave //应用于目标元素，当鼠标离开目标元素时调用
默认事件
ondragover //默认不会让其他盒子放置在盒子内,e.preventDefault()可以组织默认事件
拖拽案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } div { width: 400px; height: 400px; background-color: greenyellow; } .box2 { margin: 0px auto; } ul { width: 100%; height: 100%; list-style: none; } li { float: left; width: 100px; height: 100px; background-color: #cccccc; border-radius: 50px; text-align: center; line-height: 100px; } </style> </head> <body> <div class="box1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div class="box2"> <ul> </ul> </div> <script> var liArr = document.querySelectorAll(".box1 ul li"); var box2 = document.querySelector(".box2"); var ul = document.querySelector(".box2 ul"); var currLi = null; for (var i = 0; i < liArr.length; i++) { liArr[i].draggable = true; liArr[i].ondragstart = function (ev) { currLi = this; } } ul.ondragover = function (e) { e.preventDefault(); } ul.ondrop = function (ev) { ul.appendChild(currLi); } </script> </body> </html>
