在HTML中，拖动比较麻烦需要不断的运算拖动的距离，还有有很多的代码，今天就来演示拖动的效果与代码的实现，好了废话不多说，上一个相互都可以投放与拖动的代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> article{ margin:200px auto; width: 400px; height: 60px; border: 1px solid red; } div{ width: 100px; height: 40px; margin: 10px auto; margin-left: 65px; border: 1px solid darkgray; float: left; } div img{ margin: 5px 6px ; } </style> </head> <body> <article> <div id="dropBlock"><img id="img" src="w3school_logo_black.gif"></div> <div id="moveBlock"></div> </article> </body> <script> (function(){ var img=document.getElementById("img") var divs=document.getElementsByTagName("div") for(var i=0;i<divs.length;i++){ divs[i].ondragover=function(e){ e.preventDefault(); } divs[i].ondrop=function(e){ this.appendChild(img); } } })(); //封装document.getElementById(); function $() { var elements = new Array(); for (var i = arguments.length - 1; i >= 0; i--) { var element = arguments[i]; if (typeof element == "string") { element = document.getElementById(element); } if (arguments.length == 1) { return element; } else { elements.push(element); } return elements; }; }; //封装事件处理 function addEvent(node, type, listener) { if (!(node = $(node))) return false; if (node.addEventListener) { //W3C node.addEventListener(type, listener, false); return true; } else if (node.attachEvent) { node['e' + type + listener] = listener; node[type + listener] = function() { node['e' + type + listener](window.event); }; node.attachEvent('on' + type, node[type + listener]); return true; } return false; }; //移出事件 function removeEvent(node,type,listener){ if (!(node = $(node))) return false; if(node.removeEventListener){ node.removeEventListener(type,listener,false); return true; }else if(node.removeEvent){ node.detachEvent('on'+type,node[type+listener]); node[type+listener] = null; return true; } return false; }; //获取事件对象 function getEventObject(e){ return e || window.event; } //阻止事件冒泡 function stopPropagation(eventObject){ var eventObject = eventObject || getEventObject(); if(eventObject.stopPropagation){ eventObject.stopPropagation(); }else{ eventObject.cancelBubble = true; } }; //阻止浏览器默认 事件 function stopDefault(eventObject){ var eventObject = eventObject || getEventObject(); if(eventObject.preventDefault){ eventObject.preventDefault(); }else{ eventObject.returnValue = false; } }; //获取鼠标点击时的x和y坐标 function getPointerPositionInDocument(eventObject) { eventObject = eventObject || getEventObject(eventObject); var x = eventObject.pageX || (eventObject.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var y = eventObject.pageY || (eventObject.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); return { 'x': x, 'y': y }; }; //获取文档的宽和高 function getWindowSize(){ var width = height = 0; if(this.innerWidth){ width = this.innerWidth; height = this.innerHeight; }else if(document.documentElement && document.documentElement.clientHeight){ width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; }else if(document.body && document.body.clientHeight){ width = document.body.clientWidth; height = document.body.clientHeight; } return {'width':width,'height':height}; }; //获取标签的宽、高和left、top function getDimensions(element){ if (!(element = $(element))) return false; return { 'left':element.offsetLeft, 'top':element.offsetTop, 'width':element.offsetWidth, 'height':element.offsetHeight }; } //设置标签样式 function setStyle(element, styles) { if (!(element = $(element))) return false; for (property in styles) { if (!styles.hasOwnProperty(property)) continue; if (element.style.setProperty) { element.style.setProperty( uncamelize(property, '-'), styles[property], null); } else { element.style[camelize(property)] = styles[property]; } } return true; }; //将-形式的字符串转换为驼峰命名法的字符串 function camelize(s) { return s.replace(/-(\w)/g, function(strMatch, p1) { return p1.toUpperCase(); }); }; //将驼峰命名法的字符串转换为-形式的字符串 function uncamelize(s, sep) { sep = sep || '-'; return s.replace(/([a-z])([A-Z])/g, function(strMatch, p1, p2) { return p1 + sep + p2.toLowerCase(); }); }; </script> </html>
在这当中要理解其中拖动的步骤，在拖动时步骤一个是七个，它可以分为七个事件，分别是：开始拖动，拖动中，拖动结束，进入投放区，投放区移动，投放，离开投放区，这个七个步骤不要乱找好位置，同时是一步执行，同时还有一个很重要的一个因数——阻止默认事件，在浏览器中有默认事件，这个有好有坏，看个人理解。