easyui缩放后的拖拽问题

来源：互联网发布：java入门书籍推荐知乎编辑：程序博客网时间：2024/06/16 20:27

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

0 0