JS 拖动...

 

拖拽功能恐怕也是AJAX最明显的特征之一了,之前自己实现过拖拽效果,性能并不好,尤其在IE下的反映,

在网上搜索的时候发现大部分的实现效果都是类似这样的:

(1)         创建mousedown, mousemove, mouseup的监听事件

(2)         mousemove的监听事件中不断的重置被拖拽元素的left, top值 (性能问题就出在这里)

因为mousemove事件的执行是当鼠标每移动一个像素,就会触发绑定的事件相应函数,而JS操作DOM又是非常耗资源的;

 

 

 

 

 

 

后来看到scriptaculous这个框架(基于prototype.js)实现的拖拽性能非常好,主要是在IE下的反映,

打开代码从一堆源码中找到了一句关键词:setInterval,这个轮询函数将鼠标的移动和被拖拽元素的移动模拟在两个线程上执行,

而且不用在每移动一个像素就对元素的坐标操作一次,这样大大的节省了资源的利用

 

 

贴代码

 

HTML.

 

 

posted on 2011-03-21 14:31  斯人-  阅读(133)  评论(0编辑  收藏  举报