在上一篇文章中，講述的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塊中資料作刪改的話，那上一文章中的內容依然可行，所以還是看情況而定吧