0

我正在尝试使用 Raphael 用 javascript 构建棋盘游戏，其中涉及让用户拖放一些图片。我知道 Raphael 对象有一个方法drag可以拖动图片。

我希望用户仅根据规则移动一块（由图片表示）。为此，我可以编写一个方法move以这种方式（在这个例子中，一块只能垂直移动一个正方形）：

move = function (dx, dy) {
    document.getElementById("xCoord").innerHTML = dx;
    document.getElementById("yCoord").innerHTML = dy;
startSquareX = coordToSquare(this.ox);
startSquareY = coordToSquare(this.oy);
newSquareX = coordToSquare(this.ox+dx);
newSquareY = coordToSquare(this.oy+dy);
var deltaX = newSquareX - startSquareX;
var deltaY = newSquareY - startSquareY;       
if((deltaX*deltaX + deltaY*deltaY)===1) {
    this.attr({x: this.ox + dx, y: this.oy+dy});                       
} else {
    this.attr({x: this.ox, y: this.oy});
}}

上面的代码使用户能够在规则允许的棋盘中唯一的方格中移动棋子。我更希望有明显的不同： - 用户可以将棋子拖到棋盘上任何她想要的地方 - 当棋子放在正方形上时，如果棋子按照规则移动，那么棋子就会放在用户的位置把它丢了。否则，将其放回其初始方格。

这是我无法做到的第二点，因为我不知道如何处理 Raphael 的“drop”事件。有人可以帮忙吗？

4

1 回答 1

3

Raphael中没有drop事件，但Element.drag有一个事件处理程序onend。这就是您定义“下降”的地方。

参考这个演示。注意up当元素停止被拖动时调用的处理程序（查看源代码）。

于 2012-08-30T13:56:42.470 回答