在浏览器中,设置某个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){
}
});