jquery插件-自由拖拽

最近工作不是很忙，学习之余想整理一些代码出来，首先想到的就是是js拖拽。 两年前去某公司面试的时候，曾经被问过这个问题，如何在页面上拖放元素，尽管现在看起来很简单，但当时的我半点思路都没有，面试想当然失败了。 这两天趁空闲整理出一个自由拖拽的jquery插件：jquery.jsDrag.js。

js拖拽主要用到了鼠标三个事件：mousedown、mousemove、mouseup。

mousedown：鼠标按下

mouseup：鼠标松开

mousemove：鼠标移动

mousedown和click的区别：鼠标点击的整个过程会发生 mousedown→mouseup→click三个事件， click在最后鼠标松开之后才会发生。

htm框架：<div class="jsDrag" ><div class="drager"></div></div>，.drager素是我们点击拖拽的元素，.jsDrag为拖拽元素可移动的空间。

调用方式：$(".jsDrag").drag(setting)  目前提供三种方式，自由拖拽，横向拖拽，纵向拖拽，省略参数的情况下为自由拖拽

现在只接收一个属性

type:free|horizontal|vertical   

 

插件源码：

JS

(function($){

    $.fn.extend({

        drag: function(setting){

            var settting = setting || {};

            var config = {

                type: "free"

            };

            config = $.extend(config, setting);

            

            this.each(function(){

                var $panel = $(this) ;

                var $drag = $panel.find(".drager");

                var coor = {};

                var pos = {};

                var flag = false;

                

                $drag.mousedown(function(evt){ 

                    coor.cX = evt.clientX;

                    coor.cY = evt.clientY;

                    pos.left = parseInt($drag.css("left"));

                    pos.top =  parseInt($drag.css("top")); 

                    flag = true;

                });

                

                $(document).mousemove(function(evt){

                    if (flag) {

                        var maxWidth = $panel.width() - $drag.width();

                        var maxHeight = $panel.height() - $drag.height(); 

                        var nowLeft = (pos.left+(evt.clientX-coor.cX));

                        var nowTop = (pos.top+(evt.clientY-coor.cY));

                        

                        pos.left = nowLeft <= 0 ? 0 : (nowLeft > maxWidth ? maxWidth : nowLeft);

                        pos.top = nowTop <= 0 ? 0 : (nowTop > maxHeight ? maxHeight : nowTop);

                         

                        var cssParam = {"left": pos.left, "top":pos.top};

                        switch (config.type) {

                            case "free" :

                                break;

                            case "horizontal" :

                                delete cssParam["top"];

                                break;

                            case "vertical" :

                                delete cssParam["left"];

                                break;

                        }

                        

                        $drag.css(cssParam);

                        

                        coor.cX = evt.clientX;

                        coor.cY = evt.clientY;

                    }

                }).mouseup(function(evt){ 

                    flag = false;

                }); 

            });

            return this;

        }

    });

})(jQuery);

View Code

CSS

.jsDrag {

                position:relative;

                width:800px;

                height:50px;

                margin:0 auto;

                background:#FF0;

                border:1px solid #ccc;

            }

            

            .drager {

                background:#000;

                width:10px;

                height:10px;

                position:absolute;

                top:0;

                left:0;

                cursor:pointer;

            }

View Code

 需要注意的是，不要给.jsDrag 设置padding等样式， 有需要的话可以把样式设置到.jsDrag父元素上

点击下载demo