在Raphael处理JavaScript中的“drop”事件

我正在试图用Raphael在javascript中构建一个棋盘游戏，其中涉及用户拖放一些图片。我知道拉斐尔物体有一个方法拖动，使图片被拖动。在Raphael处理JavaScript中的“drop”事件

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

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

上面的代码使得用户能够在移动的一块只有规则允许的董事会广场。我宁愿让它看起来不同： - 用户可以在板上任意位置拖动一块 - 当该块落在正方形上时，如果该块按照规则移动，则将该块放到位置用户放弃了它。否则，它被放回原来的广场。

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

来源

2012-08-30 S4M

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

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

来源

2012-08-30 13:56:42 MalSu

我想测试你的答案，但显然我不允许访问你的演示。你确定它是http://raphaeljs.com/graffle.js？ – S4M

编辑链接，我试图直接链接到源。 – MalSu

是的，我设法做我想做的。我没有把控制权放在移动功能中，而是把它放到了最上面的功能中。非常感谢！ – S4M

在Raphael处理JavaScript中的“drop”事件

回答

相关问题