easyui缩放后的拖拽问题

在浏览器中,设置某个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个问题:

  1. 开始拖拽时(鼠标按住),被拖拽元素会漂到一个不对的位置上;
  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){
	        }
	});

原创文章 159 获赞 11 访问量 36万+

猜你喜欢

转载自blog.csdn.net/acrodelphi/article/details/51239827