0

私は、ユーザーにいくつかの写真をドラッグアンドドロップさせることを含む、Raphaelを使用してjavascriptでボードゲームを構築しようとしています。Raphaelオブジェクトには、画像をドラッグできるメソッドdragがあることを知っています。

規則に従ってのみ、ユーザーに作品（写真で表される）を動かしてもらいたい。これを行うには、そのように移動するメソッドを記述できます（この例では、ピースは垂直方向に1マスしか移動できません）。

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

上記のコードを使用すると、ユーザーは、ルールで許可されているボード内の唯一の正方形にピースを移動できます。私はそれを別の見た目にしたいと思います：-ユーザーはボード上の好きな場所にピースをドラッグできます-ピースが正方形にドロップされたときに、ルールに従ってピースが移動された場合、そのピースはユーザーの場所に配置されます落とした。それ以外の場合は、最初の正方形に戻されます。

これは、ラファエルでイベント「ドロップ」を処理する方法がわからないため、私ができない2番目のポイントです。誰かが助けることができますか？

4

1 に答える 1

3

dropRaphaelにはイベントはありませんElement.dragが、のイベントハンドラーがありonendます。ここで「ドロップ」を定義します。

このデモを参照してください。up要素のドラッグが停止したときに呼び出されるハンドラー（ソースの表示）に注意してください。

于 2012-08-30T13:56:42.470 に答える