Question

我有一些圈子，我用作可拖动的按钮，我可以将拖动事件分配给它们并且它可以正常工作，但我想克隆并拖动它们，所以我最终得到了多个按钮（尽可能多需要）。我如何克隆然后拖动克隆对象？

这就是我所拥有的

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知识有限，所以任何帮助都会受到赞赏。

谢谢！

Answer 1

尝试使用对象。

我创建了一个对象来封装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”引用，并使用变量在拖动函数中引用它。

这样做的原因是当拖动调用“move”，“start”和“up”时，此对象不会引用您的对象。 “这个”经常变化。通过使用“that”，您将锁定要在这些方法中使用的对象。

Here's更好地解释“那=这个”。（一定要提前通知，以获得出色的解释）

这是一个fiddle，可以创建两个可以单独拖动的按钮。

希望有所帮助

Answer 2

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

克隆在移动开始，mousedown，mouseup，点击不工作但是这样做

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

Answer 3

不确定Raphael是否具有通用节点的克隆功能，但是克隆圆圈可以通过执行类似

的操作来手动完成

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

修改：您可以直接调用circle.clone（）而不是执行上述操作（Element.clone）

对于拖动时的克隆，一旦拖动开始，它可能不是直截了当的，我想你无法改变被拖动的对象。你的替代方案可能是：

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

raphaeljs克隆和拖动

3 个答案: