1

jQueryのドラッグアンドドロップ機能を試してみましたが、JSconsoleで次のエラーが発生します。

Uncaught TypeError: Cannot read property 'options' of undefined

基本的に、次のようにピースを動かすボードゲームをしようとしています。

  • ボードはテーブルで、空の正方形は空です<td></td>
  • 空でないTDが<div class="..."></div>内部にある場合、divクラスはdragまたはnodrag（順番に応じて）のいずれかです。
  • ドラッグするとき、jQueryが行うことは、相対的な位置を指定し、上/左を調整することです
  • ドロップするとき、私がしているのは、古い正方形と新しい正方形を取得して使用するappendTo()ことです。divがある場合は、最初remove()にそれを使用します。
  • 有効なドロップの後、クラスを切り替えてdrag、nodrag最初にdroppable属性を削除し、次にこれを新しいドラッグ可能に追加します

コードの2つの重要な部分（そしてここではjsFidle）は次のとおりです。

function toggleDrag(){
    //remove the (old) draggables
    if($(".drag").data("draggable")){//prevent crash when nobody is draggable
        $(".drag").draggable("destroy");
    }

    //swapp classes
    var tmp=$(".drag");
    var tmp2=$(".nodrag");
    tmp.removeClass("drag").addClass("nodrag");
    tmp2.removeClass("nodrag").addClass("drag");

    //make the (new) draggables
    $(".drag").draggable({
        revert:"invalid"
    });
}

そしてすべての正方形の内側（<td>）：

$("td").droppable({
    drop:function(ev,ui){
        var tar=$(this);
        var xdiv=$("#"+tar.attr("id")+" div");

        //if the square is not empty
        if(xdiv.length){
            xdiv.remove();//remove piece
        }

        //I removed styles to reset Top/Left to 0
        //append_TO_ moves the div
        ui.draggable.removeAttr("style").appendTo(tar);

        //I call the toggler funcion
        toggleDrag();
    }
});

注：ドラッグされたのと同じ正方形にピースをドロップすると、本当に悪いことが起こることをよく知っています。私の完全なコードでは、ドロップ可能なものをサニタイズして合法的な移動のみを許可します

この完全に機能するコードがこのコンソールエラーを引き起こしている理由はありますか？

4

2 に答える 2

1

このエラーが表示されるのは、 (明らかに) ハンドラー内のドラッグ可能な要素を破棄することが許可されていないためです。drop

これを回避するハッキーな方法の 1 つは、

toggleDrag();

dropハンドラー内で

setTimeout(toggleDrag, 0);
于 2012-11-30T06:21:14.470 に答える
0

さらにテストを重ねた結果、ドラッグ可能オブジェクトはドロップ可能オブジェクトの後にstop:トリガーされると結論付けたので、ここに移動しました。drop:toggleDrag()

$(".drag").draggable({
    //... ,
    stop:function(ev,ui){
        toggleDrag(); //a check is needed to make sure it was dropped on dropables though
    }
});

古い問題は、ボードの外にピースを落とした場合 (そしてゆっくりと戻ってきたときに) にトリガーされ、他のピースをすばやく移動した場合にも発生しました。これもこれで直ります。

于 2012-11-30T07:13:25.017 に答える