拖拽
事件：
dragstart拖拽开始
drag拖拽中
dragend拖拽结束
dragenter进入投放区
dragover投放区中移动
dragleave离开投放区
drop投放
-------------------
通常在dragover(投放区中移动)事件中，默认地，没法将数据元素放置到其余元素中。若是须要设置容许放置，咱们必须阻止对元素的默认处理方式。可经过调用 ondragover 事件的 event.preventDefault()方法。
在dragstart（拖拽开始）事件中能够传值，经过dataTransfer.setData() 方法设置被拖数据的数据类型和值.而后能够在drop（投放）事件中获得开始出传过来的值，经过dataTransfer.getData()方法获取。html
下面是一个简单的拖放代码：（后面封装的函数都是兼容性的，能够做为参考文件。）node
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| #dropBlock{ | |
| height: 300px; | |
| width: 300px; | |
| background: #4E67AB; | |
| border: 1px dashed #ddd; | |
| } | |
| #moveBlock{ | |
| position: absolute; | |
| height: 80px; | |
| width: 80px; | |
| background: #CB8112; | |
| box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="dropBlock"></div> | |
| <div id="moveBlock" draggable="true"></div> | |
| </body> | |
| <script> | |
| (function(){ | |
| var moveBlock = $("moveBlock"); | |
| var dropBlock = $("dropBlock"); | |
| var startPoint; | |
| var moveBlockPosintion | |
| // console.log(moveBlock); | |
| addEvent(moveBlock,"dragstart",function(e){ | |
| e = getEventObject(e); | |
| startPoint = getPointerPositionInDocument(e); | |
| moveBlockPosintion = getDimensions(moveBlock); | |
| }); | |
| // addEvent(moveBlock,"drag",function(){ | |
| // console.log("拖拽中"); | |
| // }); | |
| // addEvent(moveBlock,"dragend",function(){ | |
| // console.log("拖拽结束"); | |
| // }); | |
| // addEvent(dropBlock,"dragenter",function(){ | |
| // console.log("进入投放区"); | |
| // }); | |
| addEvent(dropBlock,"dragover",function(e){ | |
| e = getEventObject(e); | |
| //阻止默认事件发生 | |
| stopDefault(e); | |
| }); | |
| // addEvent(dropBlock,"dragleave",function(){ | |
| // console.log("离开投放区"); | |
| // }); | |
| addEvent(dropBlock,"drop",function(e){ | |
| e = getEventObject(e); | |
| var endPoint = getPointerPositionInDocument(e); | |
| setStyle(moveBlock,{ | |
| left:moveBlockPosintion.left + (endPoint.x - startPoint.x)+"px", | |
| top:moveBlockPosintion.top + (endPoint.y - startPoint.y)+"px" | |
| }); | |
| }); | |
| })(); | |
| //封装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> |