现在做页面的经常会有用到拖拽的东西 ,我一直用的都是jquery的一些插件，但知其然，不知其所以然不是我想要的。起码对于经常会用到的东西还是尽可能多去了解点，所以就百度百度，书翻几下。想着自己也试着写个可以拖拽并自动排列的例子，起码了解一下。
辅助js（主要是简化document.getElement(id) 这些的写法）
如下代码：（可略过不看 代码最后会提供下载，并且不关拖拽具体实现）
1 (function (window) { 2 var regId = /^#[\w\-]+$/, 3 regCls = /^.[\w\-]+$/, 4 //从园子里某位前辈那里看来的（有点时间了 忘记在哪）， Array.prototype.slice.call是把一个伪数组变为数组，具体百度 5 p_silice = Array.prototype.slice, 6 p_push = Array.prototype.push, 7 markArr = function (obj) { 8 return p_silice.call(obj, 0); 9 }; 10 function MWood(selector) { 11 return new MWood.prototype.init(selector); 12 }; 13 14 function MWood(selector, context) { 15 return new MWood.prototype.init(selector, context); 16 } 17 18 MWood.prototype = { 19 init: function (selector) { 20 if (regId.test(selector)) { 21 this.length = 1; 22 this[0] = document.getElementById(selector); 23 return this; 24 } 25 else if (regCls.test(selector)) { 26 if (document.querySelectorAll) { 27 p_push.apply(this, markArr(document.querySelectorAll(selector))); 28 } else { 29 var len = documenet.getElementsByTagName('*').length, 30 clsArr = [], 31 el, i = 0, 32 selector = selector.replace(/\-/g, "\\-"); 33 var oRegExp = new RegExp("(^|\\s)" + selector + "(\\s|$)"); 34 35 for (; i < len; i++) { 36 el = els[i]; 37 if (oRegExp.test(el[type])) { 38 clsArr.push(el); 39 } 40 } 41 42 pro_push.apply(this, markArr(clsArr)); 43 return this; 44 } 45 } 46 }, 47 length: 0 48 } 49 50 MWood.prototype.init.prototype = MWood.prototype; 51 52 MWood.extend = function (obj) { 53 for (var o in obj) { 54 this[o] = obj[o]; 55 } 56 } 57 58 MWood.extend({ 59 addHandle: function (elm, type, fn) { 60 if (elm.addEventListener) { 61 elm.addEventListener(type, fn, false); 62 } 63 else if (el.attachEvent) { 64 elm.attachEvent("on" + type, fn); 65 } else { 66 elm["on" + type] = fn; 67 } 68 }, 69 removeHandle: function (elm, type, fn) { 70 if (elm.removeEventListener) { 71 elm.removeEventListener(type, fn, false); 72 } 73 else if (el.detachEvent) { 74 elm.detachEvent("on" + type, fn); 75 } else { 76 elm["on" + type] = null; 77 } 78 }, 79 getEvent: function (evnet) { 80 return evnet ? evnet : window.evnet; 81 }, 82 getTarget: function (event) { 83 return event.target || event.srcElement; 84 } 85 }); 86 87 window.MWood = MWood; 88 89 })(this);
1 (function (window) { 2 var regId = /^#[\w\-]+$/, 3 regCls = /^.[\w\-]+$/, 4 //从园子里某位前辈那里看来的（有点时间了 忘记在哪）， Array.prototype.slice.call是把一个伪数组变为数组，具体百度 5 p_silice = Array.prototype.slice, 6 p_push = Array.prototype.push, 7 markArr = function (obj) { 8 return p_silice.call(obj, 0); 9 }; 10 function MWood(selector) { 11 return new MWood.prototype.init(selector); 12 }; 13 14 function MWood(selector, context) { 15 return new MWood.prototype.init(selector, context); 16 } 17 18 MWood.prototype = { 19 init: function (selector) { 20 if (regId.test(selector)) { 21 this.length = 1; 22 this[0] = document.getElementById(selector); 23 return this; 24 } 25 else if (regCls.test(selector)) { 26 if (document.querySelectorAll) { 27 p_push.apply(this, markArr(document.querySelectorAll(selector))); 28 } else { 29 var len = documenet.getElementsByTagName('*').length, 30 clsArr = [], 31 el, i = 0, 32 selector = selector.replace(/\-/g, "\\-"); 33 var oRegExp = new RegExp("(^|\\s)" + selector + "(\\s|$)"); 34 35 for (; i < len; i++) { 36 el = els[i]; 37 if (oRegExp.test(el[type])) { 38 clsArr.push(el); 39 } 40 } 41 42 pro_push.apply(this, markArr(clsArr)); 43 return this; 44 } 45 } 46 }, 47 length: 0 48 } 49 50 MWood.prototype.init.prototype = MWood.prototype; 51 52 MWood.extend = function (obj) { 53 for (var o in obj) { 54 this[o] = obj[o]; 55 } 56 } 57 58 MWood.extend({ 59 addHandle: function (elm, type, fn) { 60 if (elm.addEventListener) { 61 elm.addEventListener(type, fn, false); 62 } 63 else if (el.attachEvent) { 64 elm.attachEvent("on" + type, fn); 65 } else { 66 elm["on" + type] = fn; 67 } 68 }, 69 removeHandle: function (elm, type, fn) { 70 if (elm.removeEventListener) { 71 elm.removeEventListener(type, fn, false); 72 } 73 else if (el.detachEvent) { 74 elm.detachEvent("on" + type, fn); 75 } else { 76 elm["on" + type] = null; 77 } 78 }, 79 getEvent: function (evnet) { 80 return evnet ? evnet : window.evnet; 81 }, 82 getTarget: function (event) { 83 return event.target || event.srcElement; 84 } 85 }); 86 87 window.MWood = MWood; 88 89 })(this);
拖拽js
window.onload = function () { var dragDrop = function () { var dragInfo = {}; //存放有关拖拽对象的一些信息 function handleEvent(event) { e = MWood.getEvent(event); //获得事件 var target = MWood.getTarget(event); //获得事件对象 switch (event.type) { //判断事件类型 case "mousedown": if (target.className.indexOf("droggle") > -1) { dragInfo.dObj = target; //存放事件对象 var tlwh = getObjtlwh(target); //获得对象的 offsetTop,offsetLeft,offsetWidth,offsetHeight //计算出鼠标的坐标与对象offsetTop,offsetLeft的差值以便于鼠标移动时实时定位拖拽对象的位置 target.x = e.clientX - tlwh[1]; target.y = e.clientY - tlwh[0]; //修改对象的position以便可以设置left和top进行拖拽 从这里开始此对象已经脱离文档流 //何为文档流 当怎么样设置position或别的设置会脱离文档流请百度 target.style.position = "absolute"; //设置拖拽对象的left top width height target.style.left = tlwh[1] + "px"; target.style.top = tlwh[0] + "px"; target.style.width = tlwh[2] + "px"; target.style.height = tlwh[3] + "px"; //建立一个新对象填补被拖拽对象的位置，这样页面就还会按现在的排版，不会有任何更改。 //如果没创建，被拖拽对象的位置就会被文档流上的其他对象占用，文章最后提供代码，可以注释掉下面4句试下两种情况 dragInfo.vObj = document.createElement("div"); dragInfo.vObj.style.width = target.style.width; dragInfo.vObj.style.height = target.style.height; target.parentNode.insertBefore(dragInfo.vObj, target); } break; case "mousemove": if (dragInfo.dObj) { //当鼠标移动的时候判断时候已经有对象存在（对象会在mousedown的时候存放进这个变量里） //设置拖拽对象的left和top改变位置，因为position已经在mousedown的时候改变为absolute了（鼠标坐标-保存的差值） dragInfo.dObj.style.left = (e.clientX - dragInfo.dObj.x) + "px"; dragInfo.dObj.style.top = (e.clientY - dragInfo.dObj.y) + "px"; //获取class为droggle的一组HTMl对象.Array.prototype.slice.call是给一个伪数组转为真正的数组用的,MWood(".droggle")就是取得class为droggle的一组对象 var arr = Array.prototype.slice.call(MWood(".droggle"), 0); //循环对象 for (var i = 0; i < arr.length; i++) { if (arr[i] === dragInfo.dObj) //过滤拖拽对象 continue; var tlwh = getObjtlwh(arr[i]); //获得对象的 offsetTop,offsetLeft,offsetWidth,offsetHeight //下面就主要是判断鼠标的位置是否为引起页面上各HTML元素在页面上位置的替换 //判断鼠标x > 对比对象offsetLeft && x < （对比对象的offsetWidth + 对象对象offsetLef）。 鼠标的坐标y同理鼠标坐标x的判断 //判断位置变换也可以按自己的标准来，我百度的时候看到例子里是这样判断我就直接像他那样写了 if (e.x > tlwh[1] && e.x < (tlwh[1] + tlwh[2]) && e.y > tlwh[0] && e.y < (tlwh[0] + tlwh[3])) { if (e.y < ((tlwh[0] + tlwh[3]) / 2)) { arr[i].parentNode.insertBefore(dragInfo.vObj, arr[i]); break; } else { if (!arr[i].nextSibling) { arr[i].parentNode.appendChild(dragInfo.vObj); break; } else { arr[i].parentNode.insertBefore(dragInfo.vObj, arr[i].nextSibling); break; } } } } } break; case "mouseup": if (dragInfo.dObj) { //把拖拽对象重新弄进文档流（static就是默认的值），替换临时占位的对象，并初始化dragInfo； dragInfo.dObj.style.position = "static"; dragInfo.vObj.parentNode.insertBefore(dragInfo.dObj, dragInfo.vObj); dragInfo.dObj.parentNode.removeChild(dragInfo.vObj); dragInfo = {}; } break; } }; //绑定事件 MWood.addHandle(document, "mousedown", handleEvent); MWood.addHandle(document, "mousemove", handleEvent); MWood.addHandle(document, "mouseup", handleEvent); } (); }; function getObjtlwh(o) { var arr = []; arr[0] = o.offsetTop; arr[1] = o.offsetLeft; arr[2] = o.offsetWidth; arr[3] = o.offsetHeight; return arr }
下载点击
有什么问题或指教请留言。
标签: javascript