Question

我试图让我的一个组件停靠到另一个组件但是在拖动行为结束后似乎丢失了一些东西。转到下面的JSFiddle，将svg光标放在靠近顶部的位置，然后单击左侧的组件。现在将svg光标向下放一点并创建另一个组件。现在将底部拖到顶部一个（从下面开始，代码不能从上面开始）并放下它。似乎在＆＃34; up＆＃34;拖动处理程序我的代码，因为它当前的代码应用相对于创建组件的位置的转换，而不是相对于它被删除的位置。我不明白为什么:(请帮忙。

打开控制台看看我的意思，我在那里打印一些有用的信息和对象坐标。

这是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);
                }

         };
        }

Answer 1

原始代码的主要问题是，在放置最终转换时（在鼠标上方），不会考虑拖动变换的对象。

最简单的快速修复可能是做一些像添加3点＆＃39; ...＆＃39;改造，比如

this.transform("...t"+(tX)+","+(tY +30));

这意味着在考虑到之前的转变的情况下进行翻译。

这里有fiddle显示正在运行。

然而，一般代码感觉也可以简化，就像在fiddle here中一样。

逻辑似乎是拖动对象，然后计算对象的两个位置并拖动差值计算。但是，如果您已经知道要连接的对象，那么您知道它的变换，实际上拖动对象的位置并不重要。它总是会在目标对象旁边结束，因此不需要进行任何计算。如果这只是原始代码需要到位的更大问题的一部分，那么这可能不太正确。

我个人会坚持一条基本上克隆或相同的路径（因此所有具有相同的起始x，y），但这是一个个人品味的东西，并取决于您可能在以后遇到的其他问题。变换可能不太理想，并且将变换简化为路径本身。

一般来说，转换中有几个位，我会先读取，然后一旦SVG转换理解（如果还没有），那么请看Raphael变换字符串。

可以找到主要的Raphael变换字符串信息here

拉斐尔问题与拖放和翻译

1 个答案: