正しい場合はjQueryのドロップ可能でドラッグ可能な数です

Question

jQueryを初めて使用していて、現在は単純な問題でブロックされています。

私は2つのリストを持っています：ドロップ可能とドラッグ可能です。それに関する2つの質問：

1）落としたアイテムを知る方法？ "ドロップされた"ゾーンにあるすべてのアイテムを一覧表示します。

2）ドロップされたアイテムが正しいドロップゾーンにあるかどうかを確認する方法はありますか？ それぞれにIDがあり、正しいゾーンにドロップする必要があります（drag1〜drop1）。

この「ライブ」は簡単です。UIのIDがドロップ機能付きの$（this）のIDと同じであるかどうかを確認するだけです。

しかし、私はドロップを常に許可し、正しくドロップされるたびに再計算します。 カウンタを使用することはできますが、削除オプション（例を参照）は複雑すぎます。

要するに、droppablesを反復して、落としたものが正しいかどうかをチェックする方法です。

CODE：http://jsfiddle.net/setki/BCnyU/

Answer 1

[OK]を、私はそれが "奇妙"に見えるので、私はあまりにも満足していないが、解決策を見つけた。

私が行うことは、余分なクラスをDroppableに追加することです： "OK"。 スタイルを持たないクラスです（ただし、必要に応じてスタイリングに使用できます）。

if (dragID == dropID) { 
    $(this).addClass('OK'); 
} else { 
    $(this).addClass('NOK'); 
} 

その後、私はちょうどドラッグは誰でもできる、ドロップ可能

まあ

$(this).removeClass('OK NOK'); 

から削除された場合も、クラスを削除し、

var numItems = $('.OK').length; 
$('.counter').html('Correct: '+numItems +'/5'); 

ではなく、忘れてそのスタイルを持っているすべての人を数えますこのシンプルなソリューションを使用しますが、jQueryに他のソリューションがないかどうかを知りたいと思っています。

実施例はで見つけることができます：http://jsfiddle.net/setki/BCnyU/

お楽しみに！

Answer 2

例えば、あなたのドラッグ可能なオブジェクトへのスタート機能を追加します。

$('#yourelement').draggable({ revert: true, start: function() { $(this).addClass('active'); } 

を今、あなたはcurrentyドラッグを "アクティブ" クラスを取得している要素を。今、あなたはこのように、この要素のidを確認することができ、あなたのドロップ可能なのドロップ機能で：ドロップゾーンのIDにこれを比較するには

var dragID = $('.active').attr('id'); 

、あなたはVaRのaswellにドロップIDを取得する必要があります。

var dropID = $(this).attr('id'); 

ここから、比較したい数字だけの文字列を分割する必要があります。わかりやすく分かれている機能は、単に "google" javascript .split "、あなたは各シンボル" drop1 "を分割する場合は、配列を取得する必要があります。最後の[4]は5シンボルを含む配列になります人数、個数、総数。ここから、これらの2つの分割された変数を互いに比較することができます。すなわち、

if(splitted_dragID[4] == splitted_dropID[4]) { 
     counter++; 
     $('#counter').text('Correct: '+counter); 
} 

これは、関数が正しいたびにそれ自身を追加する、という名前の変数名を持つと仮定します。

これは正しい方向にあなたを指し示すことを願っています！ :)