最近工作不是很忙，學習之餘想整理一些程式碼出來，首先想到的就是是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);

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;
            }

 需要注意的是，不要給.jsDrag 設定padding等樣式， 有需要的話可以把樣式設定到.jsDrag父元素上