优化拖拽体验
本文介绍了一种使用setInterval提升拖拽性能的方法，避免了在mousemove事件中频繁更新DOM导致的性能问题。通过模拟两个线程分别处理鼠标移动与被拖拽元素的位置更新，显著提升了用户体验。
拖拽功能恐怕也是AJAX最明显的特征之一了，之前自己实现过拖拽效果，性能并不好，尤其在IE下的反映，
在网上搜索的时候发现大部分的实现效果都是类似这样的：
（1）创建mousedown, mousemove, mouseup的监听事件
（2）在mousemove的监听事件中不断的重置被拖拽元素的left, top值（性能问题就出在这里）
因为mousemove事件的执行是当鼠标每移动一个像素，就会触发绑定的事件相应函数，而JS操作DOM又是非常耗资源的；
后来看到scriptaculous这个框架（基于prototype.js）实现的拖拽性能非常好，主要是在IE下的反映，
打开代码从一堆源码中找到了一句关键词：setInterval，这个轮询函数将鼠标的移动和被拖拽元素的移动模拟在两个线程上执行，
而且不用在每移动一个像素就对元素的坐标操作一次，这样大大的节省了资源的利用
贴代码
var Drag = { init: function(boxname, handlename) { this.BOX = boxname; this.HANDLE = handlename; this.POINTER_X = 0; this.POINTER_Y = 0; this.CURRENT_X = 0; this.CURRENT_Y = 0; this.moveTimer = null; var self = this; this.observe(handlename, 'mousedown', function(event) { self.mouseDown(event); }); this.observe(document.body, 'mouseup', function(event) { self.mouseUp(event); }); this.observe(document.body, 'mousemove', function(event) { self.mouseMove(event); }); }, $: function(obj) { if(typeof obj == "object") return obj; return document.getElementById(obj); }, observe: function(e, n, h) { e = this.$(e); if(e == window || e == document.body) { e = document.all ? document.body : window; } if (e.addEventListener) { e.addEventListener(n, h, false); } else { e.attachEvent("on" + n, h); } }, stopObserving: function(e, n, h) { e = this.$(e); if(e == window || e == document.body) { e = document.all ? document.body : window; } if (e.removeEventListener) { e.removeEventListener(n, h, false); } else { e.detachEvent("on" + n, h); } }, mouseDown: function(event) { event = event || window.event; this.POINTER_X = event.clientX; this.POINTER_Y = event.clientY; this.mouseMoveListener(this.BOX); }, mouseUp: function(event) { event = event || window.event; this.POINTER_X = event.clientX; this.POINTER_Y = event.clientY; this.clearMouseMoveListener(); }, mouseMove: function(event) { event = event || window.event; this.CURRENT_X = event.clientX; this.CURRENT_Y = event.clientY; }, mouseMoveListener: function(obj) { obj = this.$(obj); var self = this; this.moveTimer = setInterval(function() { self.rePositionBox(obj); }, 10); }, clearMouseMoveListener: function() { if(this.moveTimer) { clearInterval(this.moveTimer); this.moveTimer = null; } }, rePositionBox: function(e, x, y) { e = this.$(e); var x = this.CURRENT_X == 0 ? 0 : this.CURRENT_X - this.POINTER_X; var y = this.CURRENT_Y == 0 ? 0 : this.CURRENT_Y - this.POINTER_Y; var currentX = parseInt(e.style.left); var currentY = parseInt(e.style.top); with(e.style) { left = currentX+x+"px"; top = currentY+y+"px"; }; this.POINTER_X = this.CURRENT_X; this.POINTER_Y = this.CURRENT_Y; } };
HTML.
<?xml version="1.0" encoding="gb2312"?><!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <mce:script src="./drag.js" mce_src="drag.js" type="text/javascript"></mce:script> <mce:script type="text/javascript" language="javascript"><!-- window.onload = function() { // setTimeout("Effect.toggle('revertbox1','appear')",200); // $('handle1').observe('dblclick',function() {Effect.Puff('revertbox1');}); // $('viewbigphoto1').observe('click',function() {window.open("./images/fjc1.jpg","fjc","width=800px,height=600px,resizable=yes")}); /* new Draggable('revertbox1',{ scroll:document.body, handle:'handle1' }); */ Drag.init('revertbox1', 'handle1'); }; // --></mce:script> <mce:style><!-- body { background:#F8F7F5; color:#666666; font-family:Arial,宋体,Helvetica,sans-serif; font-size:10pt; font-weight:bold; margin:0px; } --></mce:style><style mce_bogus="1"> body { background:#F8F7F5; color:#666666; font-family:Arial,宋体,Helvetica,sans-serif; font-size:10pt; font-weight:bold; margin:0px; } </style> </head> <body> <div id="revertbox1" style="z-index:1;width:180px;height:200px;border:1px solid #999999;top:126;left:38;position:absolute;background:#d7be03;"> <div id="handle1" style="width:100%;height:24px;padding:0px;margin:0px;border-bottom:1px solid #999999;background:#CCFFCC;cursor:move;">Mountaineering</div> <div id="viewbigphoto1" style="width:100%;height:100%;"> </div> </div> </div> <div id="revertbox1" style="z-index:1;width:180px;height:200px;border:1px solid #999999;top:126;left:38;position:absolute;background:#d7be03;"> <div id="handle1" style="width:100%;height:24px;padding:0px;margin:0px;border-bottom:1px solid #999999;background:#CCFFCC;cursor:move;">Mountaineering</div> <div id="viewbigphoto1" style="width:100%;height:100%;"> </div> </div> </div> </body> </html>
扫一扫
721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
