我试图让我的一个组件停靠到另一个组件但是在拖动行为结束后似乎丢失了一些东西。转到下面的JSFiddle,将svg光标放在靠近顶部的位置,然后单击左侧的组件。现在将svg光标向下放一点并创建另一个组件。现在将底部拖到顶部(从下面,代码不能从上面进行处理)并将其删除。它似乎在“向上”拖动处理程序中,我当前的代码应用相对于创建组件的位置而不是相对于它被删除的位置的转换。我不明白为什么:(请帮助。
打开控制台看看我的意思,我在那里打印一些有用的信息和对象坐标。
这是JSFiddle:http://jsfiddle.net/n4rzul/trqrknqj/
这是传递给raphael svg对象的整个拖动函数:
this.drag = function() {
return {
start:function () {
this.position = 0;
this.toFront();
this.lastdx ? this.odx += this.lastdx : this.odx = 0;
this.lastdy ? this.ody += this.lastdy : this.ody = 0;
this.animate({"fill-opacity": 0.5}, 500);
this.previousStroke = this.attr('stroke');
},
move:function (dx, dy) {
var draggedShape = this;
this.transform("t"+(dx+this.odx)+","+(dy+this.ody));
this.lastdx = dx;
this.lastdy = dy;
},
up: function(){
this.animate({"fill-opacity": 1}, 500);
var target;
for(i = 0; i < shapes.length; i++) {
if(shapes[i] != this) {
target = shapes[i];
console.log("found");
break;
}
}
console.log("targetXY: " + target.getBBox().x + ", " + target.getBBox().y);
console.log("draggedXY: " + this.getBBox().x + ", " + this.getBBox().y);
var tX = target.getBBox().x - this.getBBox().x;
var tY = target.getBBox().y - this.getBBox().y;
console.log("translate XY to get from dragged to target: " + tX + ", " + tY);
this.transform("t"+(tX)+","+(tY));
console.log("but it moves relative to its original XY. Why??: " + this.getBBox().x + ", " +this.getBBox().y);
}
};
}
原始代码的主要问题是,在放置最终变换时(鼠标向上),不会考虑拖动变换的对象。
最简单的快速修复可能是做一些事情,比如在变换中添加3个点'...'
this.transform("...t"+(tX)+","+(tY +30));
这意味着在考虑到之前的转变时进行翻译。
这是一个显示此运行的fiddle。
但是,一般代码感觉也可以简化,就像在fiddle here中一样。
逻辑似乎是拖动对象,然后计算对象的两个位置并拖动差异计算。但是,如果您已经知道要连接的对象,那么您知道它的变换,拖动对象的位置实际上并不重要。它总是会在目标对象旁边结束,因此不需要进行任何计算。如果这只是原始代码需要到位的更大问题的一部分,这可能不太正确。
我个人会坚持一条基本上克隆或相同的路径(因此所有具有相同的起始x,y),但这是一个个人品味的东西,并取决于您可能在以后遇到的其他问题。变换可能不太理想,并且将变换简化为路径本身。
一般来说,在变换上有几个位,我会首先阅读,然后一旦SVG变换被理解(如果还没有),那么看看Raphael变换字符串。
主要的拉斐尔变换字符串信息可以找到here