自定义拖拽框插件

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)
时间: 2024-11-05 18:32:28

自定义拖拽框插件的相关文章

jquery自定义控件拖拽框dragbox

概述: 在做项目的过程中遇到了拖拽框的使用,虽然网上有很多类似的插件,但总归不如自己的好使,于是就自己写了一个,在此总结下来,以便后用. 效果: 提供方法: setTitle(title):设置标题: setContent(content):设置内容: setsize(width, height):设置大小: hide():隐藏: show():显示: 使用方法: 创建对象 var dragbox = $("#dragbox").DragBox({ title:"拖拽的框子&

js实现拖拽框

纯js版的拖拽框,该效果很简单 直接看代码..... <!doctype html> <html> <head> <meta charset="urf-8"/> <style> #box{ border:1px solid #ccc; position:absolute; border-radius:4px; border-shadow:10px 10px 5px #888888; } #box h1{ margin:0; p

jQuery拖拽小插件

基本实现思路是利用了onmousedown,onmouseup,onmousemove三种事件和css中的绝对定位 插件功能: 1.设置拖拽热点 2.设置被拖拽对象 3.设置拖拽范围 默认情况下,拖拽热点和被拖拽对象是同一个元素,拖拽范围是文档窗口 jQuery代码 (function($){ $.fn.drag=function(opts){ var defaults={ dragObj:$(this), scope:{ left:0, top:0, right:$(document).wid

不断优化,重构我的代码-----拖拽jquery插件

最近学东西学的有点太散了,歇一阵子,重新完善之前的JQ插件,今天先上拖拽吧 // JavaScript Document (function($){ var defaults = { actionElement : "", //获得事件的元素,非必填项 rangeElement : window, //可拖动范围的元素 非必填 direction : "", //默认为空,表示何以任意拖动, 可选值为vertical或者horizontal magnetic : 0

vue的移动app项目中,自定义拖拽指令的问题

使用vue的都知道vue有一个自定义指令,我比较喜欢的就是拖拽的自定义指令,感觉挺方便的! //组件内的拖拽指令 directives: { //组建内自定义指令 drag: { // 指令的定义 bind: function(el, value) { let oDiv = el; //当前元素 let self = this; //上下文 oDiv.ontouchstart = function(e) { //鼠标按下,计算当前元素距离可视区的距离 let disX = e.touches[0

拖拽排序插件 ---- Dragula

相关链接:  https://github.com/bevacqua/react-dragula https://github.com/bevacqua/react-dragula demo:  https://bevacqua.github.io/dragula/ 引用dragula.css  否则没有拖拽时的样式效果,可在.gu-mirror里面调整拖拽时的样式.

公用拖拽功能插件

(function($){ var defaults = { // 是否可拖拽默认为true enable : true, // 要拖动的对象,默认为handle的父级的父级元素 target : null, // 回调 callback : { // move时的回调 onMove : function(e){ }, // drop时的回调 onDrop : function(e){ } } }; $.fn.name= function(options){ //name处为要绑定拖拽效果的对象

vue-draggable-resizable 拖拽缩放插件

安装: npm install --save vue-draggable-resizable 使用: <template> <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;"> <vue-draggable-resizable :w="100" :h="100" v-on:dragging="

vue拖拽排序插件vuedraggable的使用 附原生使用方法

Vue中使用 先下载依赖: npm install vuedraggable -S 项目中引入 import draggable from 'vuedraggable' 注册 components: { draggable }, demo: <template> <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}"> &