如何使拉斐尔中的元素不可拖动?

发布于 2024-09-26 13:15:47 字数 1563 浏览 7 评论 0原文

我使用 element.drag(start, move, up); 使元素可拖动

当我想让元素不可拖动时,我可以使用 文档

element.undrag(f); // Any undefined variable works as the argument

这使得元素无法再移动。

此方法有两个问题:

  1. 这使得页面上的所有元素都不可拖动。
  2. start() 仍然为每个元素触发一次。我在 start() 中触发了不透明度更改,因此非常明显。

如何使某个元素不可拖动,以便只有该元素受到影响并且 start() 不会被触发?

这是我到目前为止所拥有的。以下尝试使元素在一次拖动后不可拖动:

wiwindow.onload = function() {
    var R = Raphael("canvas", 500, 500),
    c = R.circle(100, 100, 50).attr({
        fill: "hsb(.8, 1, 1)",
        stroke: "none",
        opacity: .5
    }),
    d = R.circle(200, 200, 50).attr({
        fill: "hsb(1, 1, .8)",
        stroke: "none",
        opacity: .5
    }),        
    start = function () {
        // storing original coordinates
        this.ox = this.attr("cx");
        this.oy = this.attr("cy");
        this.attr({opacity: 1});
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        this.undrag(notDefinedVariable); // Try to make it undragable
    };

    c.drag(move, start, up);    
    d.drag(move, start, up);     
};​

尝试使用此 jsFiddle

I made an element dragable using element.drag(start, move, up);

When I want to make the element undragable, I can somewhat achieve this using the method from the documentation:

element.undrag(f); // Any undefined variable works as the argument

This makes it so that the element cannot be moved anymore.

This method has 2 problems:

  1. This makes all elements on the page undragable.
  2. start() still fires once for each element. I have an opacity change triggered in start() so it's quite obvious.

How do I make an element undragable so that only that element is affected and start() is not fired?

Here's what I have so far. The following tries to make the element undragable after one drag:

wiwindow.onload = function() {
    var R = Raphael("canvas", 500, 500),
    c = R.circle(100, 100, 50).attr({
        fill: "hsb(.8, 1, 1)",
        stroke: "none",
        opacity: .5
    }),
    d = R.circle(200, 200, 50).attr({
        fill: "hsb(1, 1, .8)",
        stroke: "none",
        opacity: .5
    }),        
    start = function () {
        // storing original coordinates
        this.ox = this.attr("cx");
        this.oy = this.attr("cy");
        this.attr({opacity: 1});
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        this.undrag(notDefinedVariable); // Try to make it undragable
    };

    c.drag(move, start, up);    
    d.drag(move, start, up);     
};​

Try it out with this jsFiddle

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

深海里的那抹蓝 2024-10-03 13:15:47

让它在 2.0 中工作

我必须更改

this.undrag(notDefinedVariable); // Try to make it undragable

this.undrag(); // Try to make it undragable

Undefined 必须包含在以前的版本中才能使其工作1/2 的工作如上所述。

Got it to work in 2.0

I had to change

this.undrag(notDefinedVariable); // Try to make it undragable

to

this.undrag(); // Try to make it undragable

Undefined had to be included in previous version to make it 1/2 work as described above.

川水往事 2024-10-03 13:15:47

这是已知错误。将在下一版本中修复。

This is known bug. Will be fixed in the next release.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文