针对于ie8的拖拽效果的jQuery实现的方法

写这篇文章的原因是因为不久前，我刚遇到这样的问题；说实话，实在是太恶心拉

而且自己又是初学者，完全搞不懂浏览器的版本之间的兼容性原理，而网上有没有关于这方面的很好的解答，着实难受我了好一阵子。好在低版本的ie浏览器中还是支持某些条件的，废话不多说；看Jquery代码

/**
*添加拖拽效果的js方法
*参数：
*/
$.fn.drag = function(){
var eleDrags = $(this);
var eleDrop = document.getElementById("center");

for(var i = 0; i < eleDrags.length; i++){
var otherEle = $(eleDrags[i]).siblings();

eleDrags[i].onselectstart = function() {
return false;
};

//当鼠标按下时，触发onmousemove、onmouseup事件，以实现元素的可拖拽效果
eleDrags[i].onmousedown = function(ev){
ev = ev || event;
var objDOM = this;
var y0 = this.offsetTop;
var y1 = ev.clientY;

eleDrop.onmousemove = function(ev){
ev = ev || event;
y2 = ev.clientY;
//当鼠标移动时，控制被拖拽元素跟随鼠标移动
//改变被拖拽元素的属性
Y = (y2 - y1);
objDOM.style.position = "absolute";
objDOM.style.top = y0 + Y + "px";
objDOM.style.color = "#bcbcbc";
objDOM.style.border = "1px solid #ffb3b0";
}

objDOM.onmouseup = function(ev){
var m = 0;
var index = $(objDOM).index();
//当鼠标抬起时，拖拽结束，则将onmousemove赋值为null即可 objDOM.offsetHeight
//恢复被拖拽元素拖拽前的属性
eleDrop.onmousemove = null;
objDOM.style.position = "static";
objDOM.style.color = "#737373";
objDOM.style.border = "1px solid #ff0000";
//改变被拖拽元素的位置
m = Math.floor(Math.abs(Y) / objDOM.offsetHeight);
if(Y>0){
var n = eleDrags[index].innerText;
for(var j = 0; j < eleDrags.length; j++){
if(j <= (index + m) && j > index){
var h = eleDrags[j].innerText;
eleDrags[j-1].innerText = h;
}
}
eleDrags[index+m].innerHTML = n;
}else if(Y<0){
var n = eleDrags[index].innerText;
for(var j = eleDrags.length-1; j >= 0; j--){
if(j > (index - m) && j <= index){
var h = eleDrags[j-1].innerText;
eleDrags[j].innerText = h;
}
}
eleDrags[index-m].innerHTML = n;
}
}
}
}
}

效果图如下:

第一步:


第二步:


第三步:


这个是我自己之前写的代码，适用性不是很强，所以各位如果需要，一定要细细的看懂才行。

另外，在下毕竟是初学者，代码规范及思路上都尚有欠缺，希望各位多提意见阿。下面给大家链接一个HTML5讲解拖拽效果的文章，谢谢关注阿




注：本文为原创文章，会经常更新知识点，为了避免陈旧知识误导，转载请注明出处，方便溯源。 本文地址：http://www.zhangxinxu.com/wordpress/?p=1419