1.什么是拖拽： 本质上来说就是一个对象和一个对象直接传递。 其实学习拖拽，就是学习拖拽事件。 2.在HTML5中很多元素是不能进行拖拽的，比如说图片和超链接：  在试图拖拽时你会发现一个禁止的符号，如果想拖拽元素，就必须为元素添加draggable="true"。 3.相关的事件： 应用于被拖拽元素的事件 ondrag 应用于拖拽元素，整个拖拽过程都会调用--持续 ondragstart 应用于拖拽元素，当拖拽开始时调用 ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用 ondragend 应用于拖拽元素，当拖拽结束时调用 应用于目标元素的事件 ondragenter 应用于目标元素，当拖拽元素进入时调用 ondragover 应用于目标元素，当停留在目标元素上时调用 ondrop 应用于目标元素，当在目标元素上松开鼠标时调用 ondragleave 应用于目标元素，当鼠标离开目标元素时调用 案例： <!DOCTYPE html> < html lang ="en" >< head >< meta charset ="UTF-8" >< title >Title</title >< style >* {margin : 0 ;padding : 0 ;} .div1 {width : 200 px ;height : 200 px ;border : 1 px solid red ;position : relative ;margin-left :20 px ;float : left ;} .div2 {width : 200 px ;height : 200 px ;border : 1 px solid blue ;position : relative ;margin-left :20 px ;float : left ;} .div3 {width : 200 px ;height : 200 px ;border : 1 px solid green ;position : relative ;margin-left :20 px ;float : left ;} p {background-color : orange ;margin-top : 5 px ;} </ style ></ head >< body >< div class ="div1" id ="div1" >< p id ="pe" draggable ="true" >试着把我拖过去</p >< p id ="pe1" draggable ="true" >试着也把我拖过去</p ></ div >< div class ="div2" id ="div2" ></div >< div class ="div3" id ="div3" ></div >< script >var obj= null ;//当前被拖拽的地元素 document. ondragstart = function (e ){/*通过事件捕获来获取当前被拖拽的子元素*/ e.target.style.opacity = 0.5 ;e.target.parentNode.style.borderWidth = "5px" ;obj = e.target;/*通过dataTransfer来实现数据的存储与获取 * setData(format,data): * format:数据的类型：text/html text/uri-list * Data:数据:一般来说是字符串值*/ e.dataTransfer. setData ("text/html" , e.target.id);} document. ondragend = function (e ){e.target.style.opacity = 1 ;e.target.parentNode.style.borderWidth = "1px" ;} document. ondragleave = function (e ){} document. ondrag = function (e ){} document. ondragenter = function (e ){console .log (e.target);} document. ondragover = function (e ){e. preventDefault ();} /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/ document. ondrop = function (e ){/*添加元素*/ //e.target.appendChild(obj); /*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/ var id= e.dataTransfer.getData ("text/html" );/*console.log("id="+id);*/ e.target. appendChild (document.getElementById (id));} document. ondragleave = function (e ){} </ script ></ body ></ html >注意：如果想触发ondrop事件，那么就必须在ondragover事件中阻止浏览器的默认行为 |
