Question

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

我希望用户仅根据规则移动一块（由图片表示）。要做到这一点，我可以用这种方式编写一个方法 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});
}}

上面的代码允许用户在规则允许的棋盘中的唯一方块中移动棋子。我宁愿以不同的方式： - 用户可以在棋盘上的任何地方拖动一块 - 当棋子落在正方形上时，如果根据规则移动棋子，则将棋子放在用户放下的地方。否则，它会被放回原来的正方形。

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

Answer 1

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

请参阅this演示。请注意元素停止拖动时调用的up处理程序（视图源）。

使用Raphael处理javascript中的“drop”事件

1 个答案: