IE8实现拖拽效果的优化版（针对于我之前的一篇文章的内容）

在上一篇文章中，讲述的ie8实现拖拽效果的内容，对于在DIV块中的数据的改变是有很大问题的，

比如说，如果你要动态删除其中的一个DIV块，在删除之后，继续其他块的情况下，就会发生数据的不匹配（意思就是：之前删除的数据再次出现并且，挤掉原来的数据）这种情况，

其实出现这个情况的原因很简单，就是因为浏览器的缓存机制，因为在一开始加载页面的时候，会把你DIV块全部加入到你的父类节点的集合中，然后放在缓存里，并且在jqyert中虽然可以删除的html中的代码和数据，但是却删除不了浏览器缓存中的数据。这样就导致你虽然删除了DIV块（包括里面的数据），但是在移动其他DIV块经过这个块原来位置时，删除的数据会再次出现的情况。

对于这个问题，我做了一些优化，
具体的代码如下：

/***添加拖拽效果的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 Y = 0;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).css({"position":"absolute","z-index":"999"});var T = y0 + Y;if(y0+Y > 0){objDOM.style.top = y0 + Y + "px";}objDOM.style.color = "#bcbcbc";objDOM.style.border = "1px solid #ffb3b0";}objDOM.onmouseup = function(ev){var m = $(objDOM).index();var html = $(objDOM).html();var obj = $("."+eleDrags[0].className+"");//当鼠标抬起时，拖拽结束，则将onmousemove赋值为null即可//恢复被拖拽元素拖拽前的属性eleDrop.onmousemove = null;//改变被拖拽元素的位置$(objDOM).css({"position":"relative","z-index":"none","color":"#737373","border":"none"});if(Y>0){//向下移动时var objUp = $(this).nextAll();Y = Math.abs(Y);for(var j = 0; j < objUp.length; j++){if( Y > objUp[j].offsetHeight ){Y = Y - objUp[j].offsetHeight;m++;}}$(obj[m]).after("<div class='dragDiv' draggable='true'></div>");$(obj[m]).next().html(html);$(obj[m]).next().drag();$(objDOM).remove();}else if(Y<0){//向上移动时var objUp = $(this).prevAll();Y = Math.abs(Y);for(var j = 0; j < objUp.length; j++){if( Y > objUp[j].offsetHeight ){Y = Y - objUp[j].offsetHeight;m--;}}$(obj[m]).before("<div class='dragDiv' draggable='true'></div>");$(obj[m]).prev().html(html);$(obj[m]).prev().drag();$(objDOM).remove();}else{if(i == 0){$(this).css("border","1px dashed #ffb3b0");$(this).find(".delBtn").show();$(this).find(".delBtn").css("z-index","999");i = 1;}else if(i == 1){$(this).css("border","none");$(this).find(".delBtn").hide();i = 0;}$(this).siblings().css("border","none");$(this).siblings().find(".delBtn").hide();}//alert(html);}}}}

另外，如果不需要对DIV块中数据作删改的话，那上一文章中的内容依然可行，所以还是看情况而定吧

这里给大家粘一下我上一文章的链接：http://blog.csdn.net/zzh94352201/article/details/53410111