jquery ui draggable 组件支持在scale的容器中
程序员文章站
2022-07-02 08:55:49
...
话痨
公司要开发一个类似datav的画布组件。整体框架采用的Vue，拖拽缩放这块使用的jquery ui。
在开发中，发现画布大小是设置的，然后通过容器的大小去将实际的画布大小进行缩放，在画布上就会使用到scale属性，然而发现，加了之后就是个坑，jquery ui 的拖拽，缩放都出现了问题，然后发现就是因为缩放之后导致偏移量不一直造成的。
拖拽
从最开始原生入手，看是否可以解决，于是有了如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width: 800px;
background: #000000;
height: 800px;
transform: scale(0.50);
position: relative;
}
.nr{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="content">
<div class="nr">
<div id="main" style="width: 100px;height: 100px;position: absolute;left: 50px;top: 0px">
<div id="title" style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></div>
<!--<div class="box"></div>-->
</div>
</div>
</div>
<script>
var l = 0.5
function Mover(title) {
this.obj = title;
this.startx = 0;
this.starty;
this.startLeft;
this.startTop;
this.mainDiv = title.parentNode;
var that = this;
this.isDown = false;
this.movedown = function(e) {
e = e ? e : window.event;
if(!window.captureEvents) {
this.setCapture();
} //事件捕获仅支持ie
// 函数功能：该函数在属于当前线程的指定窗口里设置鼠标捕获。一旦窗口捕获了鼠标，
// 所有鼠标输入都针对该窗口，无论光标是否在窗口的边界内。同一时刻只能有一个窗口捕获鼠标。
// 如果鼠标光标在另一个线程创建的窗口上，只有当鼠标键按下时系统才将鼠标输入指向指定的窗口。
// 非ie浏览器 需要在document上设置事件
that.isDown = true;
that.startx = e.clientX;
that.starty = e.clientY;
that.startLeft = parseInt(that.mainDiv.style.left) * 0.5;
that.startTop = parseInt(that.mainDiv.style.top) * 0.5;
console.log('that.startLeft:', that.startLeft)
console.log('that.startTop:', that.startTop)
console.log('startx:', that.startx)
console.log('starty:', that.starty)
}
this.move = function(e) {
e = e ? e : window.event;
if(that.isDown) {
that.mainDiv.style.left = (e.clientX - (that.startx - that.startLeft))/l + "px";
that.mainDiv.style.top = (e.clientY - (that.starty - that.startTop))/l + "px";
}
}
this.moveup = function() {
that.isDown = false;
if(!window.captureEvents) {
this.releaseCapture();
} //事件捕获仅支持ie
}
this.obj.onmousedown = this.movedown;
this.obj.onmousemove = this.move;
this.obj.onmouseup = this.moveup;
//非ie浏览器
document.addEventListener("mousemove", this.move, true);
}
var mover = new Mover(document.getElementById("title"));
</script>
</body>
</html>
发现是可以解决的，需要将缩放比例进行计算下。
到这OK，所实话，自己去写一个比较完善的拖拽也是比较花时间，所以还是想直接在jquery ui上能否直接解决。
查看源码，发现有这么一行代码：
_mouseDrag: function(event, noPropagation) {
// reset any necessary cached properties (see #5009)
if ( this.offsetParentCssPosition === "fixed" ) {
this.offset.parent = this._getParentOffset();
}
//Compute the helpers position
this.position = this._generatePosition(event);
this.positionAbs = this._convertPositionTo("absolute");
//Call plugins and callbacks and use the resulting position if something is returned
if (!noPropagation) {
var ui = this._uiHash();
if(this._trigger("drag", event, ui) === false) {
this._mouseUp({});
return false;
}
this.position = ui.position;
}
// 问题就在这个地方,position这个保存了拖拽元素的实际位置，然而是不计算scale这比例的
if(!this.options.axis || this.options.axis !== "y") {
this.helper[0].style.left = this.position.left +"px";
}
if(!this.options.axis || this.options.axis !== "x") {
this.helper[0].style.top = this.position.top+"px";
}
if($.ui.ddmanager) {
$.ui.ddmanager.drag(this, event);
}
return false;
},
既然知道了position的问题，那么我直接在这个地方加上计算的缩放比例，成功解决了拖拽时候偏移的问题。接下来就是缩放比例会动态变动，需要暴露一个接口出去可以去设置这个缩放比例，既然思路对了就去干，等会上代码。
var o = this.options
if(!this.options.axis || this.options.axis !== "y") {
this.helper[0].style.left = this.position.left / o.scale +"px";
}
if(!this.options.axis || this.options.axis !== "x") {
this.helper[0].style.top = this.position.top / o.scale +"px";
}
唉，拖拽解决了，缩放这又是个坑，同样思路走不通了，明天再踩~~
缩放
开始沿用拖拽思路发现怎么改都不对，后面发现在方法:_mouseDrag中里面就计算了移动变量，那么直接在这个地方进行就改就好了，修改完成之后，完美~~~
转载于:https://www.jianshu.com/p/28ad6b5520fc