jquery自由拖动布局(drag)可运行看效果版
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2014-05-10 23:35:08
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> Jeremy - DragDrop Test !</title><meta name="keywords" content="Javascript自由拖拽类" /> <script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script> <script type="text/javascript"> (function($) { $.extend({ //获取鼠标当前坐标 mouseCoords:function(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY};} return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; }, //获取样式值 getStyle:function(obj,styleName) { return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null)[styleName]; // return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName); } }); // 元素拖拽插件 $.fn.dragDrop = function(options) { var opts = $.extend({},$.fn.dragDrop.defaults,options); return this.each(function(){ //是否正在拖动 var bDraging = false; //移动的元素 var moveEle = $(this); //点击哪个元素,以触发移动。 //该元素需要是被移动元素的子元素(比如标题等) var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ; if(!focuEle || focuEle.length<=0) { alert('focuEle is not found! the element must be a child of '+this.id); return false; } // initDiffX|Y : 初始时,鼠标与被移动元素原点的距离 // moveX|Y : 移动时,被移动元素定位位置 (新鼠标位置与initDiffX|Y的差值) // 如果定义了移动中的回调函数,该对象将以参数传入回调函数。 var dragParams = {initDiffX:'',initDiffY:'',moveX:'',moveY:''}; //被移动元素,需要设置定位样式,否则拖拽效果将无效。 moveEle.css({'position':'absolute','left':'0','top':'0'}); //点击时,记录鼠标位置 //DOM写法: getElementById('***').onmousedown= function(event); focuEle.bind('mousedown',function(e){ //标记开始移动 bDraging = true; //改变鼠标形状 moveEle.css({'cursor':'move'}); //捕获事件。(该用法,还有个好处,就是防止移动太快导致鼠标跑出被移动元素之外) if(moveEle.get(0).setCapture) { moveEle.get(0).setCapture(); } //(实际上是鼠标当前位置相对于被移动元素原点的距离) // DOM写法:(ev.clientX + document.body.scrollLeft - document.body.clientLeft) - document.getElementById('***').style.left; dragParams.initDiffX = $.mouseCoords(e).x - moveEle.position().left; dragParams.initDiffY = $.mouseCoords(e).y - moveEle.position().top; }); //移动过程 focuEle.bind('mousemove',function(e){ if(bDraging) { //被移动元素的新位置,实际上鼠标当前位置与原位置之差 //实际上,被移动元素的新位置,也可以直接是鼠标位置,这也能体现拖拽,但是元素的位置就不会精确。 dragParams.moveX = $.mouseCoords(e).x - dragParams.initDiffX; dragParams.moveY = $.mouseCoords(e).y - dragParams.initDiffY; //是否限定在某个区域中移动. //fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值] if(opts.fixarea) { if(dragParams.moveX<opts.fixarea[0]) { dragParams.moveX=opts.fixarea[0] } if(dragParams.moveX>opts.fixarea[1]) { dragParams.moveX=opts.fixarea[1] } if(dragParams.moveY<opts.fixarea[2]) { dragParams.moveY=opts.fixarea[2] } if(dragParams.moveY>opts.fixarea[3]) { dragParams.moveY=opts.fixarea[3] } } //移动方向:可以是不限定、垂直、水平。 if(opts.dragDirection=='all') { //DOM写法: document.getElementById('***').style.left = '***px'; moveEle.css({'left':dragParams.moveX,'top':dragParams.moveY}); } else if (opts.dragDirection=='vertical') { moveEle.css({'top':dragParams.moveY}); } else if(opts.dragDirection=='horizontal') { moveEle.css({'left':dragParams.moveX}); } //如果有回调 if(opts.callback) { //将dragParams作为参数传递 opts.callback.call(opts.callback,dragParams); } } }); //鼠标弹起时,标记为取消移动 focuEle.bind('mouseup',function(e){ bDraging=false; moveEle.css({'cursor':'default'}); if(moveEle.get(0).releaseCapture) { moveEle.get(0).releaseCapture(); } }); }); }; //默认配置 $.fn.dragDrop.defaults = { focuEle:null, //点击哪个元素开始拖动,可为空。不为空时,需要为被拖动元素的子元素。 callback:null, //拖动时触发的回调。 dragDirection:'all', //拖动方向:['all','vertical','horizontal'] fixarea:null //限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY] }; })(jQuery); // test $(function(){ //限定区域,有回调函数。 $('#dragDiv').dragDrop({fixarea:[0,$('#dragContainer').width()-50,0,$('#dragContainer').height()-50],callback:function(params){ $('#span1').text('X:'+params.moveX+' Y:'+params.moveY); }}); //默认设置 $('#dragDiv1').dragDrop(); }); </script> <div id="dragContainer" style="position:relative;left:10px;top:10px;border:1px dashed blue;width:500px;height:500px;"> <div id="dragDiv" style="background-color:blue;height:50px;width:50px;position:absolute;left:0px;top:0px;"> </div> <div id="dragDiv1" style="border:1px solid red;height:50px;width:50px;position:absolute;left:0px;top:0px;"> </div></div><span id="span1"></span><div style="white-space:nowrap;"></div>