javascript - 使用 Raphael 在 javascript 中处理 "drop"事件

Question

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

我希望用户仅根据规则移动棋子(由图片表示)。为此，我可以以这种方式编写一个方法 move (在本例中，一 block 只能垂直移动一格):

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});
}}

上面的代码使用户能够在规则允许的棋盘中唯一的方 block 中移动棋子。我希望它看起来有所不同: - 用户可以将棋子拖到棋盘上的任意位置 - 当棋子掉落在方 block 上时，如果棋子按照规则移动，则棋子会放置在用户掉落的位置。否则，它会被放回到原来的方 block 上。

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

Answer 1

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

引用this演示。请注意当元素停止拖动时调用的 up 处理程序(查看源代码)。