js实现鼠标拖拽效果

作者:Jasmine - 2015年03月17日
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
<title></title>
</head>
<body>
<div class="post_content readmood" id="defend_3">
<script type="text/javascript">
                window.onload = function(){
                        var container = document.getElementById('container');//拖拽元素所在的容器
                        var ele = document.getElementById('d1');//要拖拽的元素
                        var bodyWidth = container.offsetWidth,
                                bodyHeight = container.offsetHeight;
                        var maxX = bodyWidth - ele.offsetWidth - 10;
                        var maxY = bodyHeight - ele.offsetHeight - 10;//拖拽元素的最大拖拽范围
                        var dd = new Dragdrop({
                                target : ele,//要拖拽的元素
                                area : [0,maxX,0,maxY],//拖拽元素的最大拖拽范围
                                callback : function(obj){//回调函数
                                        if(typeof obj.moveX == 'number' && this.dragX){
                                                document.getElementById('x').innerHTML = 'x:'+obj.moveX;
                                        }
                                        if(typeof obj.moveY == 'number' && this.dragY){
                                                document.getElementById('y').innerHTML = 'y:'+obj.moveY;        
                                        }
                                }
                        });        
                        document.getElementById('setting').onclick = function(e){
                                e = e || event;
                                var target = e.target || e.srcElement;
                                if(target.value == '1' && target.checked){
                                        dd.dragAll();
                                }                                
                                if(target.value == '2' && target.checked){
                                        dd.dragX();
                                }
                                if(target.value == '3' && target.checked){
                                        dd.dragY();
                                }
                                if(target.value == '4' && target.checked){
                                        dd.setDragable(false);
                                }
                                if(target.value == '5' && target.checked){
                                        dd.setDragable(true);
                                }
                                if(target.value == '6' && target.checked){
                                        dd.reStore();
                                        document.getElementById('x').innerHTML = 'x:0';
                                        document.getElementById('y').innerHTML = 'y:0';
                                }
                        }
                }
        </script>
<h4>效果演示</h4>
<div style="width:520px;height:20px;margin:10px auto;"> 拖拽状态:<span id="x">x:0</span>, <span id="y">y:0</span> </div>
<div id="container" style="position:relative;border:5px solid gray;width:520px;height:300px;margin:0 auto;">
  <div id="d1" style="width:100px;height:50px;background:gold;text-align:center;position:absolute;left:0px;top:0px;"> Drag me. </div>
</div>
<div id="setting" style="width:520px;margin:20px auto;">
  <input id="f1" type="radio" value="1" name="flag"/>
  <label for="f1">任意方向</label>
  <input id="f2" type="radio" value="2" name="flag"/>
  <label for="f2">水平方向</label>
  <input id="f3" type="radio" value="3" name="flag"/>
  <label for="f3">垂直方向</label>
  <input id="f4" type="radio" value="4" name="flag"/>
  <label for="f4">停止拖拽</label>
  <input id="f5" type="radio" value="5" name="flag"/>
  <label for="f5">开启拖拽</label>
  <input id="f6" type="radio" value="6" name="flag"/>
  <label for="f6">恢复初始状态</label>
</div>
<script>
Dragdrop = function(window){
        var doc = window.document;
        var E = {
                on : function(el, type, fn){
                        el.addEventListener ?
                                el.addEventListener(type, fn, false) :
                        el.attachEvent ?
                                el.attachEvent("on" + type, fn) :
                        el['on'+type] = fn;
                },
                un : function(el,type,fn){
                        el.removeEventListener ?
                                el.removeEventListener(type, fn, false) :
                        el.detachEvent ?
                                el.detachEvent("on" + type, fn) :
                        el['on'+type] = null;
                },
                evt : function(e){
                        return e || window.event;
                }
        };
        return function(opt){
                
                var conf = null, defaultConf, diffX, diffY;
                function Config(opt){
                        this.target = opt.target;
                        this.bridge = opt.bridge;
                        this.dragable = opt.dragable != false;
                        this.dragX = opt.dragX != false;
                        this.dragY = opt.dragY != false;
                        this.area  = opt.area;
                        this.callback = opt.callback;
                }        
                function Dragdrop(opt){
                        if(!opt){return;}
                        conf = new Config(opt);
                        defaultConf = new Config(opt);
                        conf.bridge ?
                                E.on(conf.bridge,'mousedown',mousedown) :
                                E.on(conf.target,'mousedown',mousedown);
                }
                Dragdrop.prototype = {
                        dragX : function(){
                                conf.dragX = true;
                                conf.dragY = false;
                        },
                        dragY : function(b){
                                conf.dragY = true;
                                conf.dragX = false;
                        },
                        dragAll : function(){
                                conf.dragX = true;
                                conf.dragY = true;
                        },
                        setArea : function(a){
                                conf.area = a;
                        },
                        setBridge : function(b){
                                conf.bridge = b;
                        },
                        setDragable : function(b){
                                conf.dragable = b;
                        },
                        reStore : function(){
                                conf = new Config(defaultConf);
                                conf.target.style.top = '0px';
                                conf.target.style.left = '0px';
                        },
                        getDragX : function(){
                                return conf.dragX;
                        },
                        getDragY : function(){
                                return conf.dragY;
                        }
                }
                function mousedown(e){
                        e = E.evt(e);
                        var el = conf.target;
                        el.style.position = 'absolute';
                        el.style.cursor = 'move';
                        if(el.setCapture){ //IE
                                E.on(el, "losecapture", mouseup);
                                el.setCapture();
                                e.cancelBubble = true;
                        }else if(window.captureEvents){ //标准DOM
                                e.stopPropagation();
                                E.on(window, "blur", mouseup);
                                e.preventDefault();
                        }
                        diffX = e.clientX - el.offsetLeft;
                        diffY = e.clientY - el.offsetTop;
                        E.on(doc,'mousemove',mousemove);
                        E.on(doc,'mouseup',mouseup);
                }
                function mousemove(e){
                        var el = conf.target, e = E.evt(e), moveX = e.clientX - diffX, moveY = e.clientY - diffY;
                        var minX, maxX, minY, maxY;
                        if(conf.area){
                                minX = conf.area[0];
                                maxX = conf.area[1];
                                minY = conf.area[2];
                                maxY = conf.area[3];
                                moveX < minX && (moveX = minX); // left 最小值
                                moveX > maxX && (moveX = maxX); // left 最大值
                                moveY < minY && (moveY = minY); // top 最小值
                                moveY > maxY && (moveY = maxY); // top 最大值
                        }
                        if(conf.dragable){
                                conf.dragX && (el.style.left = moveX + 'px');
                                conf.dragY && (el.style.top =  moveY + 'px');
                                if(conf.callback){
                                        var obj = {moveX:moveX,moveY:moveY};
                                        conf.callback.call(conf,obj);
                                }
                        }
                }
                function mouseup(e){
                        var el = conf.target;
                        el.style.cursor = 'default';
                        E.un(doc,'mousemove',mousemove);
                        E.un(doc,'mouseup',mouseup);
                        if(el.releaseCapture){ //IE
                                E.un(el, "losecapture", mouseup);
                                el.releaseCapture();
                        }
                        if(window.releaseEvents){ //标准DOM
                                E.un(window, "blur", mouseup);
                        }
                }
                return new Dragdrop(opt);
                
        }        
}(this);
</script>
</body>
</html>

鼠标实现不同方向拖拽效果,详细查看代码。

本文作者: Jasmine

本文链接: https://www.jianbaizhan.com/article/158

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!