自定义拖拽框插件

最新推荐文章于 2022-12-04 16:51:47 发布

凡人·没有梦

最新推荐文章于 2022-12-04 16:51:47 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： HTML拖拽框自定义js插件

本文链接：https://blog.csdn.net/pleasurehappy/article/details/46399855

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>

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)