0

divを使用して基本的なドラッグアンドドロップインターフェイスを作成しようとしています。すべてのdivとグリッドが機能していますが、ドラッグアンドドロップが相互にドロップされないようにするためのコードが何であるかがわかりません。ドラッグアンドドロップは、空きスペースがある場合にのみ許可してください。何か助けはありますか？

4

2 に答える 2

1

ドラッグアンドドロップのチュートリアルは次のとおりです。http ：//www.ericbieller.com/2010/06/24/how-to-create-a-simple-drag-and-drop-with-jquery/

より具体的な回答が必要な場合は、（コードを使用して）より具体的な質問をする必要があります。

于 2012-07-26T22:19:37.920 に答える
0

あなたはこのようなことをすることができます：

  1. すべてのdroppables要素のクラスと.cDrop、draggablesの別のクラスを作成します.cDrags。

  2. ドロップには、これに似た無名関数呼び出しを使用します。

    $('.cDrop').each(function(){
    $(this).droppable({
        drop: function(event, ui) {
            if((ui.draggable.isDroppedOverOtherDrag())){
                    $(ui.draggable).draggable('option','revert','valid');
            }else{
                   //You do here whatever you need to do. For expample:         
                    alert('Good Job!!');

            }
        }
    });
});

  3. ドラッグには、これに似た無名関数呼び出しを使用します。

    $( ".selector" ).draggable({
    start: function(event, ui) {
        $(this).draggable('option','revert','invalid');

    }
});

このようにして、ドラッグ可能なものを元に戻す必要がある場合（つまり、適切な場所にドロップされていない場合）に「言う」だけです。

isDroppedOverOtherDrag()ドロップされたドラッグが別のドラッグの上にある場合、関数はtrueを返します。それ以外の場合はfalseを返します。これを実装するには、ui.draggableオブジェクトの現在の位置、すでに適切にドロップされている残りのドラッグの位置、およびそれらの幅/高さを使用する必要があります。ドロップ関数にコードを追加し、ドラッグのIDを賢く使用すると、特定のドロップに既に適切にドロップされたドラッグを含む変数を作成できます。

それが役に立てば幸い

于 2012-10-15T11:53:58.553 に答える