drag & resize元素的jQuery實現

呂大豹發表於2014-07-15
jQuery

　　有時專案中會遇到需要拖動元素、拖拽調整元素大小的需求。大部分時候都不想自己寫一遍，因為已經有很多現成的例子了。例如jqueryui提供的drag和resize。但是僅僅是為了這麼小一個功能就引入一個庫，真是有點划不來，價效比太低了撒。於是自己實現了一遍，寫了兩個通用函式，需要的時候直接把他們考到專案中就可以啦。程式碼很清爽有木有！

　　先說元素拖動，其實就是動態改變元素的left值和top值，當然前提是元素必須是絕對定位或者相對定位的。程式碼如下：

function draggable(el){
        el.css('cursor', 'move');
        var eventX, eventY, startX, startY, drag;
        el.on('mousedown', function(event){
            eventX = event.clientX;
            eventY = event.clientY;
            startX = parseInt(el.css('left'));
            startY = parseInt(el.css('top'));
            drag = true;
            if(this.setCapture){this.setCapture();}
        }).on('mouseup', function(event){
            drag = false;
            if(this.releaseCapture){this.releaseCapture();}
        });
        $(document).on('mousemove', function(event){
            if(drag){
                var l = startX + (event.clientX - eventX);
                var t = startY + (event.clientY - eventY);
                el.css({left : l, top : t,});
            }
        }).on('mouseup', function(){
            drag = false;
        });
    }

　　看一下效果：

　　程式碼放在了runjs.cn上，檢視原始碼請點這裡http://runjs.cn/code/jfqpe2lo

　　拖拽調整元素大小稍微複雜點，其實原理與拖動元素也差不多，無非是動態改變的屬性多了些，包括left、top、width、height。程式碼有點長就不貼這裡了。先看下效果：

　　程式碼放在了runjs.cn上，檢視原始碼請點這裡http://runjs.cn/code/ihiqp2pa

相關文章