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

最新推荐文章于 2021-07-26 16:35:26 发布

原创

最新推荐文章于 2021-07-26 16:35:26 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文针对IE8中实现拖拽效果时遇到的删除DIV块后数据重新出现的问题进行分析，指出问题源于浏览器缓存机制。作者提供了一种优化方案，并分享了相关代码。若不涉及数据修改，前文方法仍然适用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一篇文章中，讲述的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;
				//当鼠标移动