如何使拉斐尔中的元素不可拖动?
我使用 element.drag(start, move, up);
使元素可拖动
当我想让元素不可拖动时,我可以使用 文档:
element.undrag(f); // Any undefined variable works as the argument
这使得元素无法再移动。
此方法有两个问题:
- 这使得页面上的所有元素都不可拖动。
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:
- This makes all elements on the page undragable.
start()
still fires once for each element. I have an opacity change triggered instart()
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
让它在 2.0 中工作
我必须更改
为
Undefined 必须包含在以前的版本中才能使其工作1/2 的工作如上所述。
Got it to work in 2.0
I had to change
to
Undefined had to be included in previous version to make it 1/2 work as described above.
这是已知错误。将在下一版本中修复。
This is known bug. Will be fixed in the next release.