Javascript 拉斐尔的克隆和拖动

我有很多圆圈，我用它们作为可拖动的按钮，我可以给它们分配拖动事件，它可以正常工作，但我想克隆并拖动它们，所以我最终得到了多个按钮（根据需要）。如何克隆并拖动克隆的对象

这就是我所拥有的

var a = r.circle(20, 50, 15)
// drag handler
        var start = function(x,y,event) {
            this.ox = this.attr("cx");
            this.oy = this.attr("cy");
            this.animate({r: 20, opacity: .25}, 500, ">");
        },
        move = function(dx, dy) {
            this.attr({cx: this.ox + dx, cy: this.oy + dy});
        },
        up = function () {
            this.animate({r: 15, opacity: .5}, 500, ">");
        };
a.drag(move, start, up);

我尝试过各种方法，一开始就克隆“a”，克隆“this”，但是我的js知识有限，所以如果有任何帮助，我将不胜感激

---

谢谢

不确定Raphael是否具有通用节点的克隆功能，但可以通过执行以下操作手动克隆圆

var circle = r.circle(x, y, r);
var clone = r.circle(circle.cx, circle.cy, circle.r);
clone.attr({ attr1: circle.attr1, ...);

Edit:a您只需调用circle.clone（）即可，无需执行上述操作（）

至于拖动时的克隆，可能并不简单，因为一旦拖动开始，我想您就无法更改正在拖动的对象。您的备选方案可以是：

• 开始拖动时克隆圆，拖动原始项并将副本保留在其原始位置（如果将事件处理程序附加到原始项，则这是一个坏主意）
• 如上所述，但在拖动结束后切换原始和复制位置（可能会产生闪烁）
• 找到一种方法，以编程方式取消对原始项的拖动并触发对其副本的拖动，同时注意这不会发展为无限递归

尝试使用对象

我创建了一个对象来封装Raphael对象和要在其上使用的拖动函数

function Button(ix,iy,ir)
{
// grab a reference to the objects "this"
var that = this;
that.a = r.circle(ix, iy, ir).attr({"fill":"red"})
// drag handler
    that.start = function(x,y,event) {
        that.a.ox = this.attr("cx");
        that.a.oy = this.attr("cy");
        that.a.animate({r: 20, opacity: .25}, 500, ">");
    }
   that.move = function(dx, dy) {
        that.a.attr({cx: that.a.ox + dx, cy: that.a.oy + dy});
    }
   that.up = function () {
        that.a.animate({r: 15, opacity: .5}, 500, ">");
    };
that.a.drag(that.move,that.start,that.up);
return that;
}

这里重要的是在变量中捕获“this”引用，并在拖动函数中使用该变量引用它

这样做的原因是，当拖动调用“移动”、“开始”和“向上”时，此对象不会引用您的对象。“这个”经常变化。通过使用“that”，您锁定了要在这些方法中使用的对象

对“that=this”的更好解释。（请务必投票给lonesomeday，以获得出色的解释）

下面是一个创建两个按钮的示例，您可以独立拖动它们

---

希望对您有所帮助

我自己的解决方案使用mousemove，请参阅我的

它在移动开始时克隆，mousedown，mouseup，单击“不工作”，但这确实工作

a.mousemove(clone_handler);
var clone_handler = function() {
var x = this.clone();
x.drag(move, start, up);

---

谢谢，但拖动不是问题，我如何克隆按钮，然后拖动克隆？我一定没有领会你的意思。是否要拖动按钮，然后克隆它，然后能够拖动两个按钮？我已经更新了来实现这一点。谢谢，也许我的描述不太符合要求，但我想要的是在开始时有几个按钮。只要你点击按钮并拖动它，它就会创建一个新的按钮，该按钮将被拖动，使原来的按钮保持原样。事实上，经过多次尝试和错误，我发现使用mousemove（我下面的答案中的whown）可以找到一个不同的解决方案，但我认为使用克隆按钮的方法也可以。再次感谢