1、HTML代码例如以下 注意引入jquery和自定仪的drag.js , 路径正确打开页面就能看到效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>拖拽jQuery </title> <style type="text/css"> *{margin:0;padding:0;border:0;} </style> </head> <body> <div class="divbox" arrow="left" style="border:1px solid red;500px;height:200px;background:#f7f7f7;position:absolute;top:100px;left:100px;"> <h3 style="height:30px;background:#181818;color:#fff;">1111111</h3> 左右移动 由arrow="left"控制 </div> <div class="divbox" arrow="top" style="border:1px solid red;500px;height:200px;background:#f7f7f7;position:absolute;top:100px;right:100px;"> <h3 style="height:30px;background:#181818;color:#fff;">22222222</h3> 上下移动 由arrow="top"控制 </div> <div class="divbox" style="border:1px solid red;500px;height:200px;background:#f7f7f7;position:absolute;bottom:100px;left:100px;"> <h3 style="height:30px;background:#181818;color:#fff;">22222222</h3> 全局移动 没有arrow属性就没有限制 </div> <div class="divbox" handle="" style="border:1px solid red;500px;height:200px;background:#f7f7f7;position:absolute;bottom:100px;right:100px;"> 全局移动 没有h3标签 须要加入handle属性 假设为空则总体都能拖动 </div> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="drag.js"></script> <script type="text/javascript"> $(function(){ $('.divbox').WanglDrag({handle:'h3'}); }); </script> </body> </html>
2、自己定义drag.js
/** * @author:wangl */ (function($){ /**插件入口**/ $.fn.WanglDrag = function(options){ var z_index = 0; this.each(function(){ //參数优先级从高到低 为: 属性參数 、 调用參数 、 默认參数 var opts = $.extend({},$.fn.WanglDrag.defaults,options,$.fn.WanglDrag.parseOptions(this)); alert(JSON.stringify(opts)); opts.box = $(this); init(opts); }); }; var z_index = -1; /**初始化**/ function init(opts){ var $box = opts.box, x = 0, y = 0, left = 0, top = 0, b_width = $(document).width(), b_height = $(document).height(), maxWidth = b_width - $box.outerWidth(), maxHeight = b_height - $box.outerHeight(); $handle = opts.handle ?$box.find(opts.handle) : $box; $handle.css("cursor",'move'); $box.on('mousemove',function(e){ $box.css({"z-index":z_index++}); }); $handle.on('mousedown',function(e){ x = e.clientX; y = e.clientY; var $this = $(this); var offset = $(this).offset(); left = offset.left; top = offset.top; var isDrag = true; //alert('x:'+x+',y:'+y+',left:'+left+',top:'+top); $(document).on('mousemove',function(e){ if(isDrag){ var new_left = left + e.clientX - x; var new_top = top + e.clientY - y; if(opts.arrow && opts.arrow=="top")new_left=left;//控制垂直方向 if(opts.arrow && opts.arrow=="left")new_top=top;//控制水平方向 if(new_left<=0)new_left = 2; if(new_top<=0)new_top = 2; if(new_left >= maxWidth)new_left = maxWidth; if(new_top >= maxHeight)new_top = maxHeight; $box.css({"top":new_top,"left":new_left}); } }).on('mouseup',function(){ isDrag = false; }); }); }; /**默认參数*/ $.fn.WanglDrag.defaults = { handle : "", arrow : "" } /**属性參数*/ $.fn.WanglDrag.parseOptions = function(target){ var $target = $(target); return { handle : $target.attr('handle'), arrow : $target.attr('arrow') } } })(jQuery)