jQuery可拖動的「遊戲」問題

Question

所以我有一個像遊戲一樣的功能，更多的是一個測驗，但我無法弄清楚如何讓它工作。 HTML

<td id='1to7 value' class="boxes" value="1to7"> Text here </td> 

所以這是jQuery的

<script> 
    $(function() { 
     $(".boxes").draggable(); 
     $("#one,#droppable").droppable({ 
      drop: function (event, ui) { 
       $(this) 
       alert("testing!"); 
      } 
     }); 
    }); 
</script> 

正如你可以看到它要對正在上#one或#droppable放棄了一切提醒。

現在，這裏是抓住。我有不同的值（1到7）。

每個.draggable區域都有一個ID（1到7和7 .draggable區域總數）。

如何檢查是否將正確的方框拖動到了正確的.draggable區域，然後檢查是否在拖動所有框後（通過提交）。

Answer 1

您可以從ui.drabbable獲得可拖動對象並檢查其val()進行測試。

$(function() { 
    $(".boxes").draggable(
     {revert: 'invalid', 
     stop: function(){ 
     $(this).draggable('option','revert','invalid'); 
     } 
    } 
); 

    $("#droppable").droppable({ 
     drop: function (event, ui) { 
     var draggable = ui.draggable; 
     if(draggable.attr("value")==1) 
      alert("correct!"); 
      else 
      draggable.draggable('option','revert',true); 
     } 
    }); 

}）;

你不能讓<td>拖動，相反，你必須使用類似<span>或<div>

<span class="boxes" value="1"> Draggable1 </span> 
<span class="boxes" value="2"> Draggable2 </span> 
<span class="boxes" value="3"> Draggable3 </span> 
<span class="boxes" value="4"> Draggable4 </span> 
<span class="boxes" value="5"> Draggable5 </span> 
<span class="boxes" value="6"> Draggable6 </span> 
<span class="boxes" value="7"> Draggable7 </span> 
<div id="droppable"> 
    droppable area 
</div> 

這裏fiddle

Answer 2

使用accept:符：http://www.jeasyui.com/documentation/droppable.php

可以使用onDrop事件來設置標誌，以確定是否所有需要的對象都在最後被丟棄。