We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Jeremy - DragDrop Test !</title> <meta name="keywords" content="Javascript自由拖拽类" /> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript"> (function($,undefined){ $.fn.dragDrop = function(options,callback){ var defaults ={ focusElement:null, //点击哪个元素开始拖动,可为空。不为空时，需要为被拖动元素的子元素。 dir:'all', //拖动方向：['all','vertical','horizontal'] dirArea:null, //限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY] dirMax:200 //单向拖动的最大值，单位PX }; var opts = $.extend({},defaults,options), bDraging = false, moveElement = $(this), ew=moveElement.outerWidth(), eh=moveElement.outerHeight(); //点击哪个元素，以触发移动。 //该元素需要是被移动元素的子元素（比如标题等） var focusElement = opts.focusElement ? $(opts.focusElement,moveElement) : moveElement ; if(!focusElement || focusElement.length<=0){ alert('focusElement is not found! the element must be a child of '+this.id); return false; } // statX|Y : 初始时，鼠标与被移动元素原点的距离 // moveX|Y : 移动时，被移动元素定位位置 (新鼠标位置与statX|Y的差值) var dragParams = {statX:0,statY:0,moveX:0,moveY:0}; if(opts.dir=="all"){ moveElement.css({'position':'absolute','left':0,'top':0}); }else{ moveElement.css({'position':'absolute','left':-ew/2,'top':-eh/2}); } focusElement.bind('mousedown',function(e){ bDraging = true; //改变鼠标形状 moveElement.css({'cursor':'move'}); //捕获事件。（该用法，还有个好处，就是防止移动太快导致鼠标跑出被移动元素之外） if(moveElement.get(0).setCapture){ moveElement.get(0).setCapture(); } dragParams.statX = e.pageX - moveElement.position().left; dragParams.statY = e.pageY - moveElement.position().top; }); focusElement.bind('mousemove',function(e){ if(bDraging){ dragParams.moveX = e.pageX - dragParams.statX; dragParams.moveY = e.pageY - dragParams.statY; //dirArea格式: [左上角x,左上角Y,左下角x,左下角Y] if(opts.dir=='all'){ if(opts.dirArea){ if(dragParams.moveX<opts.dirArea[0]){ dragParams.moveX=opts.dirArea[0] } if(dragParams.moveX>opts.dirArea[2]-ew){ dragParams.moveX=opts.dirArea[2]-ew } if(dragParams.moveY<opts.dirArea[1]){ dragParams.moveY=opts.dirArea[1] } if(dragParams.moveY>opts.dirArea[3]-eh){ dragParams.moveY=opts.dirArea[3]-eh } } }else if (opts.dir=='vertical'){ if(dragParams.moveY<-eh/2){ dragParams.moveY=-eh/2; } if(dragParams.moveY>opts.dirMax-eh/2){ dragParams.moveY=opts.dirMax-eh/2; } }else{ if(dragParams.moveX<-ew/2){ dragParams.moveX=-ew/2; } if(dragParams.moveX>opts.dirMax-ew/2){ dragParams.moveX=opts.dirMax-ew/2; } } if(opts.dir=='all'){ moveElement.css({'left':dragParams.moveX,'top':dragParams.moveY}); }else if (opts.dir=='vertical'){ moveElement.css({'top':dragParams.moveY}); }else if(opts.dir=='horizontal'){ moveElement.css({'left':dragParams.moveX}); } if(typeof(callback)==='function'){ if(opts.dir=='all'){ callback(dragParams); }else if(opts.dir=='vertical'){ callback(dragParams.moveY+eh/2); }else{ callback(dragParams.moveX+ew/2); } } } }); focusElement.bind('mouseup',function(e){ bDraging=false; moveElement.css({'cursor':'default'}); if(moveElement.get(0).releaseCapture){ moveElement.get(0).releaseCapture(); } }); return { value:function(v){ if(typeof(v)==undefined){ if (opts.dir=='vertical'){ return dragParams.moveY+eh/2 }else if(opts.dir=='horizontal'){ return dragParams.moveX+ew/2 }else{ return {x:dragParams.moveX,y:dragParams.moveY} } }else{ if (opts.dir=='vertical'){ moveElement.css({'top':v-eh/2}); }else if(opts.dir=='horizontal'){ moveElement.css({'left':v-ew/2}); }else{ moveElement.css({'left':v.x,'top':v.y}); } } } } return this; }; })(jQuery,'undefined'); // test $(function(){ //限定区域，有回调函数。 var d1=$('#dragDiv1').dragDrop({dir:'vertical',dirMax:100},function(d){ $('#span1').text(d); }); //默认设置 var d2=$('#dragDiv2').dragDrop({dir:'horizontal',dirMax:200},function(d){ $('#span2').text(d); }); var d3=$('#dragDiv3').dragDrop({dirArea:[0,0,500,500]},function(d){ $('#span3').text(d.moveX+','+d.moveY); }); d3.value({x:333,y:222}) }); </script> </head> <body> <div id="dragContainer" style="position:relative;left:10px;top:10px;border:1px dashed blue;width:500px;height:500px;"> <div id="dragDiv3" style="background:#333;height:100px;width:200px;"> <h4></h4> <p>sfsoi174-poih;skahf9q08r 234234 <br> asfaspolfjlsdkafj';l</p> </div> <div id="dragDiv2" style="border:1px solid red;height:50px;width:50px;"> </div> <div id="dragDiv1" style="background-color:blue;height:50px;width:50px;"> </div> </div> <div id="span1"></div> <div id="span2"></div> <div id="span3"></div> </body> </html>
The text was updated successfully, but these errors were encountered:
No branches or pull requests
The text was updated successfully, but these errors were encountered: