完美的层拖拽dragdrop代码及封装库

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html>
  <head>
    <title>dragdrop，层拖动 www.shouce.ren </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">
	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>
	<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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

完美的层拖拽dragdrop代码及封装库

分类

表格图层

描述

实现任意方向的拖拽，也可以水平方向、垂直方向、停止拖拽、开启拖拽、恢复初始状态操作，拖拽元素 HTMLElemnt 必选，有以下参数： <br>　　bridge指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到 <br>　　dragable 是否可拖拽 (t...