[分享] 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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。