drag & resize元素的jQuery实现

浏览数：29 / 时间：2015年06月09日

　　有时项目中会遇到需要拖动元素、拖拽调整元素大小的需求。大部分时候都不想自己写一遍，因为已经有很多现成的例子了。例如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;
        });
    }