拖拽插件

功能比较简单

直接上代码

var Drap=function(opts){
    var that=this;

    var defaults={
        "id":"drap",
        "direct":"xy",
        "move":that.move,
        "moveCallback":null,"circlimit":true
    }
    
    that.opts=$.extend(defaults,opts);
}

Drap.prototype={
    enable:function(){
        var that=this;
        that.opts.status=0;
        that.opts.obj=$("#"+that.opts.id);
        $(document).on("mousedown mousemove mouseup",function(e){that.handleEvent(e)});
    },
    unable:function(){
        $(document).off("mousedown mousemove mouseup");
    },
    handleEvent:function(event){
        var that=this,
            ele=event.target,
            opts=that.opts;
        switch(event.type){
            case "mousedown":
                if(ele.id==opts.id){
                    var position=that.opts.obj.position();
                        position_top=position.top,
                        position_left=position.left;
                    event.preventDefault();

                    opts.status=1;
                    opts.startpositon={x:event.pageX,y:event.pageY};
                    opts.diff={x:opts.startpositon.x-position_left,y:opts.startpositon.y-position_top};
                }
                break;
            case "mousemove":
                if(opts.status==1)
                {
                    opts.endposition={x:event.pageX,y:event.pageY};
                    opts.left=opts.endposition.x-opts.diff.x;
                    opts.top=opts.endposition.y-opts.diff.y;
                    that.move();
                }
                break;
            case "mouseup":
                opts.status=0;
                break;
            default:break;
        }
    },
    fixTop:function(){
        var that=this,    
            opts=that.opts,
            $pobk=$(document.getElementById(opts.id).offsetParent),
            height=$pobk.height()-opts.obj.outerHeight();

            return opts.top<0?0:(opts.top>height?height:opts.top);
    },
    fixLeft:function(){
        var that=this,    
            opts=that.opts,
            $pobk=$(document.getElementById(opts.id).offsetParent),
            width=$pobk.width()-opts.obj.outerWidth();

            return opts.left<0?0:(opts.left>width?width:opts.left);
    },
    move:function(){
        var that=this,    
            opts=that.opts;
        if(opts.circlimit){
            opts.top=that.fixTop();
            opts.left=that.fixLeft();
        }
        if(opts.direct=="xy"){
            opts.obj.css({"top":opts.top+"px","left":opts.left+"px"});
        }
        if(opts.direct=="x"){
            opts.obj.css({"left":opts.left+"px"});
        }
        if(opts.direct=="y"){
            opts.obj.css({"top":opts.top+"px"});
        }

        if(opts.moveCallback)
        {
            opts.moveCallback.apply(that);
        }
    }
}

参数说明：

id：要控制移动的元素id

direct：移动方向 可以在x，y，xy移动

move：移动执行的事件可以被重写

moveCallBack：移动结束后出发的方法

circlimit：移动是否限制在父元素中

调用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Drap</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
.drap-box{position: relative;width: 500px;height: 200px;background: yellow}
#drap{background: red;width: 60px;position: absolute;}
.drap-box1{position: relative;width: 500px;height: 200px;background: blue}
#drap1{background: green;width: 60px;position: absolute;}
</style>
</head>
<body>
<div class="drap-box">
    <div id="drap">111</div>
</div>

<div class="drap-box1">
    <div id="drap1">222</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="drap.js"></script>
 <script type="text/javascript">
var drap = new Drap({
    "id":"drap",
    "direct":"xy",
    "moveCallback":function(){
        console.log(this.fixTop());
        console.log(this.fixLeft());
    }
});
drap.enable();

var drap1 = new Drap({
    "id":"drap1",
    "direct":"x",
    "moveCallback":function(){
        console.log(this.fixTop());
        console.log(this.fixLeft());
    }
});
drap1.enable();
</script>
</body>
</html>
posted @ 2013-07-19 17:02  haiwei0304  阅读(449)  评论(2)    收藏  举报