jqDnR扩展功能,实现子容器在父容器中拖拽

DPS项目需要进行对jqDnR进行扩展,花了一天时间终于搞定了。下面的代码实现子容器在父容器中进行拖拽的功能


/*
* jqDnR - Minimalistic Drag'n'Resize for jQuery.
*
* Copyright (c) 2007 Brice Burgess <bhb@iceburg.net>, http://www.iceburg.net/
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* $Version: 2007.08.19 +r2
* 
* last modified by Cross @2012.02.08
* email:mag_lee@126.com
* add features:
* 1. limit the child div in parent div 
*/

(function($) {
	$.fn.jqDrag = function(h) {
		return i(this, h, 'd'); 
	};
	
	$.fn.jqResize = function(h) { 
		return i(this, h, 'r'); 
	};
	
	$.jqDnR = {
		dnr: {}, 
		e: 0,
		drag: function(v) {
			
			// 获取父容器的绝对坐标
			var parentX = parseInt(E.parent().offset().left); 
			var parentY = parseInt(E.parent().offset().top); 
			// 获取父容器的宽度
			var parentW = parseInt(E.parent().css("width").split("px")[0]);
			var parentH = parseInt(E.parent().css("height").split("px")[0]);
			
			// 获取子容器的相对坐标
			var childX = parseInt(E.position().left); 
			var childY = parseInt(E.position().top); 
			// 获取子容器的宽度
			var childW = parseInt(E.css("width").split("px")[0]);
			var childH = parseInt(E.css("height").split("px")[0]);
			
			if (M.k == 'd') {
				// 限制子容器只能在父容器中拖动
				E.css({
					left: (M.X + v.pageX - M.pX) < 0 ? 0:(M.X + v.pageX - M.pX) < parentW- M.W ? (M.X + v.pageX - M.pX):parentW - M.W, 
					top: (M.Y + v.pageY - M.pY) < 0 ? 0:(M.Y + v.pageY - M.pY) < parentH -M.H ?(M.Y + v.pageY - M.pY):parentH - M.H 
				});
			} else {
				// 限制子容器只能在父容器中缩放
				E.css({
					width: (M.X + v.pageX - M.pX) < parentW- M.W ? Math.max(v.pageX - M.pX + M.W, 50):parentW - childX, 
					height: (M.Y + v.pageY - M.pY) < parentH -M.H ? Math.max(v.pageY - M.pY + M.H, 50):parentH - childY
				}); 
				return false;
			}
		},
		stop: function() { 
			E.css('opacity', M.o); 
			$(document).unbind('mousemove', J.drag).unbind('mouseup', J.stop); 
		}
	};
	
	var J = $.jqDnR, 
		M = J.dnr,	//{}
		E = J.e,	//0
		i = function(e, h, k) {
			return e.each(function() {
				h = (h) ? $(h, e) : e;
				h.bind('mousedown', { e: e, k: k }, function(v) {
					var d = v.data, 
						p = {}; 
						E = d.e;
						
					// attempt utilization of dimensions plugin to fix IE issues
					if (E.css('position') != 'relative') {
						p = E.position();
						if (!($.browser.msie && ($.browser.version == "6.0")) && (E.css('position') == 'fixed')) {
							p.top -= $(window).scrollTop();
							p.left -= $(window).scrollLeft();
						}
					}
				
					M = { 
						X: p.left || f('left') || 0, 
						Y: p.top || f('top') || 0, 
						W: f('width') || E[0].scrollWidth || 0, 
						H: f('height') || E[0].scrollHeight || 0, 
						pX: v.pageX, 
						pY: v.pageY, 
						k: d.k, 
						o: E.css('opacity')
					};
					
					E.css({ opacity: 0.8 }); $(document).mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
					return false;
				});
			});
		},
	
		f = function(k) { 
			return parseInt(E.css(k)) || false; 
		};
})(jQuery); 


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 Vue3 实现功能可以使用原生的事件来实现,具体步骤如下: 1. 在表格头部的每一列上绑定 `draggable="true"` 属性,使得每一列可以被。 2. 监听表格头部的每一列的 `dragstart` 事件,记录当前的列的索引。 3. 监听表格头部的每一列的 `dragover` 事件,并阻止默认行为,以允许放置。 4. 监听表格头部的每一列的 `drop` 事件,获取当前的列的索引,并交换其与目标列的位置。 以下是一个示例代码: ```vue <template> <table> <thead> <tr> <th v-for="(item, index) in tableColumns" :key="item.id" :draggable="true" @dragstart="dragStart(index)" @dragover.prevent @drop="dropHandler(index)"> {{ item.title }} </th> </tr> </thead> <tbody> <!-- 表格内容 --> </tbody> </table> </template> <script> export default { data() { return { tableColumns: [ { id: 1, title: '列1' }, { id: 2, title: '列2' }, { id: 3, title: '列3' }, ], dragingColumnIndex: null, }; }, methods: { dragStart(index) { this.dragingColumnIndex = index; }, dropHandler(index) { if (index !== this.dragingColumnIndex) { // 交换列顺序 [this.tableColumns[index], this.tableColumns[this.dragingColumnIndex]] = [this.tableColumns[this.dragingColumnIndex], this.tableColumns[index]]; } }, }, }; </script> ``` 在这个示例代码,我们使用了 `dragingColumnIndex` 来记录当前的列的索引,然后在 `dropHandler` 交换列和目标列的位置。注意,在 `dragover` 事件使用 `prevent` 修饰符阻止默认行为,以允许 `drop` 事件触发。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值