[分享] jQuery 版“元素拖拽”原型

“元素拖拽”顾名思义：拖动，移动，拽放。有很多的解释，而且在网上相关资料非常之多，本人在开发 AsyncBox 当中也用到此效果，借此分享，同时也是一种技术积累。本文主要针对拖拽原型进行解析，给刚接触 JQuery 的爱好者一个简单的示例。

 

在引入 Jquery.js 后：

< script type = " text/javascript " >
    $( function (){
         // 绑定拖动元素对象
        bindDrag(document.getElementById( ' test ' ));
    });
    
     function  bindDrag(el){
         // 初始化参数
         var  els  =  el.style,
             // 鼠标的 X 和 Y 轴坐标
            x  =  y  =   0 ;

         // 邪恶的食指
        $(el).mousedown( function (e){
             // 按下元素后，计算当前鼠标位置
            x  =  e.clientX  -  el.offsetLeft;
            y  =  e.clientY  -  el.offsetTop;
             // IE下捕捉焦点
            el.setCapture  &&  el.setCapture();
             // 绑定事件
            $(document).bind( ' mousemove ' ,mouseMove).bind( ' mouseup ' ,mouseUp);
        });
         // 移动事件
         function  mouseMove(e){
             // 宇宙超级无敌运算中...
            els.top   =  e.clientY  -  y  +   ' px ' ;
            els.left  =  e.clientX  -  x  +   ' px ' ;
        }
         // 停止事件
         function  mouseUp(){
             // IE下释放焦点
            el.releaseCapture  &&  el.releaseCapture();
             // 卸载事件
            $(document).unbind( ' mousemove ' ,mouseMove).unbind( ' mouseup ' ,mouseUp);
        }
    }
< / script>

 

下载：完整示例

 

版权声明：
本文原创发布于 博客园，作者为 小吴同学，博客 http://wuxinxi007.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。