js 拖拽排序
现在做页面的经常会有用到拖拽的东西 ,我一直用的都是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
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did48226