javascript raphaeljs 拖放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3675519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
raphaeljs drag and drop
提问by Abdul Rauf
I am using rapaeljs for my web app. I want to set dropable boundries of the object. Object can move in dropable area. Once an object come in dropable area, there should be no way out for the object.
我正在为我的网络应用程序使用 rapaeljs。我想设置对象的可放置边界。对象可以在可放置区域内移动。一旦一个物体进入可放置区域，该物体就没有出路了。
回答by Peter Ajtai
Raphael has built in drag and drop support through .drag(). Use it in the form element.drag(start, move, up);Where the 3 arguments are 3 function references to the functions you write that deal with the mousedown, movement, and mouseup events respectively.
Raphael 通过.drag(). 以下列形式使用它，element.drag(start, move, up);其中 3 个参数是对您编写的分别处理 mousedown、movement 和 mouseup 事件的函数的 3 个函数引用。
Note how this.oxand this.oyis used to store the starting positions and dxand dyis used for the movement.
请注意this.ox和如何this.oy用于存储起始位置，dx并且如何dy用于运动。
The followingimplements a drag and drop on a box. The box can always be moved, but once it's in the "jail" box, it cannot be moved back out. When the box crosses into the jail, the color is instantly changed, to signal the user that the functionality has changed.
下面实现了在框上的拖放。盒子总是可以移动的，但是一旦它在“监狱”盒子里，就不能再移回来了。当盒子进入监狱时，颜色会立即改变，以向用户表明功能已经改变。
This is implemented with a Math.min()and Math.max()adjustment of the box's position after dxand dyare added to the current position:
这是通过实施Math.min()和Math.max()后箱的位置进行调整dx，并dy添加到当前位置：
var nowX, nowY, move = function (dx, dy) {
// move will be called with dx and dy
if (this.attr("y") > 60 || this.attr("x") > 60)
this.attr({x: this.ox + dx, y: this.oy + dy});
else {
nowX = Math.min(60, this.ox + dx);
nowY = Math.min(60, this.oy + dy);
nowX = Math.max(0, nowX);
nowY = Math.max(0, nowY);
this.attr({x: nowX, y: nowY });
if (this.attr("fill") != "#000") this.attr({fill: "#000"});
}
}
You could also make it so that the box cannot be picked up again once it is put down in the "jail" box. This could be done with a test of position in the move()or start()function or the use of c.undrag(f)in the stop()function.
您也可以这样做，以便一旦将其放入“监狱”箱中就无法再次拿起它。这可以通过在move()orstart()函数中的位置测试或在函数中的使用来c.undrag(f)完成stop()。
jsFiddle example
jsFiddle 示例
window.onload = function() {
var nowX, nowY, R = Raphael("canvas", 500, 500),
c = R.rect(200, 200, 40, 40).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5,
cursor: "move"
}),
j = R.rect(0,0,100,100),
// start, move, and up are the drag functions
start = function () {
// storing original coordinates
this.ox = this.attr("x");
this.oy = this.attr("y");
this.attr({opacity: 1});
if (this.attr("y") < 60 && this.attr("x") < 60)
this.attr({fill: "#000"});
},
move = function (dx, dy) {
// move will be called with dx and dy
if (this.attr("y") > 60 || this.attr("x") > 60)
this.attr({x: this.ox + dx, y: this.oy + dy});
else {
nowX = Math.min(60, this.ox + dx);
nowY = Math.min(60, this.oy + dy);
nowX = Math.max(0, nowX);
nowY = Math.max(0, nowY);
this.attr({x: nowX, y: nowY });
if (this.attr("fill") != "#000") this.attr({fill: "#000"});
}
},
up = function () {
// restoring state
this.attr({opacity: .5});
if (this.attr("y") < 60 && this.attr("x") < 60)
this.attr({fill: "#AEAEAE"});
};
// rstart and rmove are the resize functions;
c.drag(move, start, up);
};?
