Javascript实现自由拖拽

文章类别：Javascript | 发表日期:2011-4-15 9:00:59

用Javascript实现的自由拖拽效果，可选择水平或垂直拖拽。

下面是JS代码

/**
* 基本拖拽
* new Dragdrop({
*   target 拖拽元素 HTMLElemnt 必选
*   bridge 指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到
*   dragable 是否可拖拽 (true)默认
*   dragX true/false false水平方向不可拖拽 (true)默认
*   dragY true/false false垂直方向不可拖拽 (true)默认
*   area [minX,maxX,minY,maxY] 指定拖拽范围默认任意拖动
*   callback 移动过程中的回调函数
* });
*
* demo
*   dragdrop_0.6.html
*/

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

html代码开始：

<!DOCTYPE HTML>
<html>
<head>
    <title>dragdrop_0.5.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type="text/css">
   body {margin:0;padding:0;}
  </style>
<script type="text/javascript" src="dragdrop_0.6.js"></script>
<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>
</head>

<body>
<div style="width:600px;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:600px;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:600px;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>
</body>
</html>

Windows操作 [文]	Word教程 [文]	Excel教程 [文]	PowerPoint [文]	Dreamweaver [文]	Fireworks [文]
Flash教程 [文]	PhotoShop [文]	CorelDraw [文]	C语言教程 [文]	Html教程 [文]	Div+Css布局 [文]
Javascript [文]	ACCESS数据库 [文]	ASP教程 [文]	SQLServer [文]	ASP.NET教程 [文]	FlashAS [文]

Word教程网	Excel教程网	Dreamweaver 教程网	Fireworks教程网	PPT教程网	FLASH教程网	PS教程网
HTML教程网	DIV CSS教程网	FLASH AS教程网	ACCESS教程网	SQL SERVER教程网	C语言教程网	JAVASCRIPT教程网
ASP教程网	ASP.NET教程网	CorelDraw教程网