JS实现dragdrop层拖拽代码，可设置功能方式

发布时间：2018-08-23 08:07:56 所属栏目：活动来源：站长网

导读：JS实现dragdrop层拖拽代码，可设置功能方式，实现任意方向的拖拽，也可以水平方向、垂直方向、停止拖拽、开启拖拽、恢复初始状态操作，拖拽元素 HTMLElemnt 必选，有以下参数： bridge指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到 dragable 是否

　　JS实现dragdrop层拖拽代码，可设置功能方式，实现任意方向的拖拽，也可以水平方向、垂直方向、停止拖拽、开启拖拽、恢复初始状态操作，拖拽元素 HTMLElemnt 必选，有以下参数：

　　bridge指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到

　　dragable 是否可拖拽 (true)默认

　　dragX true/false false水平方向不可拖拽 (true)默认

　　dragY true/false false垂直方向不可拖拽 (true)默认

　　area [minX,maxX,minY,maxY] 指定拖拽范围默认任意拖动

　　callback 移动过程中的回调函数

　　你可以截取第一个JS函数的内容封装成函数库，以后用起来更方便……

　　示例代码：

<!DOCTYPE HTML> <html> <head> <title>dragdrop，层拖动 www.veryhuo.com </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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!