easyui缩放后的拖拽问题

最新推荐文章于 2023-04-07 15:12:38 发布

火星牛

最新推荐文章于 2023-04-07 15:12:38 发布

阅读量2.7k

点赞数

分类专栏： Javascript 文章标签： easyui drag drop zoom cursor

本文链接：https://blog.csdn.net/acrodelphi/article/details/51239827

版权

Javascript 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了如何解决在EasyUI1.4.4版本中，div缩放后导致的元素拖拽问题，包括修正开始拖拽时的漂移和被拖拽元素跟随鼠标位置的问题。通过提供具体代码实现，帮助开发者正确处理缩放与拖拽之间的关系，确保交互体验流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在浏览器中，设置某个div的缩放，使用这个方法：

function div_zoom(zoom, transformOrigin, el) {
	transformOrigin = transformOrigin || [ 0, 0 ];
	el=el || g_PlumbInstance.getContainer();
	var p = [ "-webkit-", "-moz-", "-ms-", "-o-" ];
	var s = "scale(" + zoom + ")";
	var oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";

	for (var i = 0; i < p.length; i++) {
		el.style[p[i] + "transform"] = s;
		el.style[p[i] + "transformOrigin"] = oString;
	}

	el.style["transform"] = s;
	el.style["transformOrigin"] = oString;
};

对easyui1.4.4版本，使用draggable函数来拖拽一个zoom后的容器里面的元素，但是被拖拽元素的位置与鼠标之间存在2个问题：

开始拖拽时（鼠标按住），被拖拽元素会漂到一个不对的位置上；
鼠标移动拖拽时，被拖拽元素不跟随鼠标位置，差距越远越大。

不使用proxy时，需要修正如下：

	$("#div_plcEditorDrag").draggable({
		onBeforeDrag:function(e){
			//因为有缩放，修正开始拖拽的漂移
			e.data.startTop =Math.round(e.data.startTop / g_plcEditorZoomScale);
			e.data.startLeft=Math.round(e.data.startLeft / g_plcEditorZoomScale);
	        return true;
		},
		onStartDrag:function(e){
		},
		onDrag:function(e){
			//因为有缩放，修正被拖拽元件跟随鼠标
			var offset=$(e.data.parent).offset();
			e.data.top = (e.pageY-offset.top-e.data.offsetHeight)/g_plcEditorZoomScale;
	                e.data.left = (e.pageX-offset.left-e.data.offsetWidth)/g_plcEditorZoomScale;	        
		},
		onStopDrag:function(e){			
		}
	});//easyui的拖拽

拖拽使用proxy时，需要如下修正：

	divDrag.draggable({
		cursor : 'pointer',
		proxy : "clone",
		revert : true,
		onBeforeDrag:function(e){
			},
		onStartDrag: function (e) {
		    plc_focuseElememt(divDrag);
		    //延迟proxy，使有机会执行dblclick
	            var proxy = $(this).draggable('proxy');
	            proxy.css('z-index', 20);
	                        
	            proxy.hide();
	            setTimeout(function(){	            	
	           	 proxy.show();	           	 	
	            }, 500);
	        },
	        onDrag: function(e){
	        	//修正位置，使跟随鼠标位置
	        	var offset=$(e.data.parent).offset();
			e.data.top = (e.pageY-offset.top-e.data.offsetHeight)/g_plcEditorZoomScale;
		        e.data.left = (e.pageX-offset.left-e.data.offsetWidth)/g_plcEditorZoomScale;
	        	var proxy = $(this).draggable('proxy');
	        	if (proxy){
	        		proxy.show();
	        	}	        	
	        },
	        onStopDrag:function(e){
	        }
	});