自訂拖拽框外掛程式，自訂拖拽外掛程式
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;width: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;width: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;width: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;width: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>
/** * @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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
