爲什麼我不能拖動框的其餘部分

Question

我試圖解決jQuery可拖動，有代碼從數據庫中檢索信息，每個信息顯示在每個數據庫的每個BOX中。

這樣的...

<?php 
include('dbcon.php'); 

$product_id=$_POST['selector']; 
$N = count($product_id); 
for($i=0; $i < $N; $i++) 
{ 
    $result = mysql_query("SELECT * FROM product where product_id='$product_id[$i]'"); 
    while($row = mysql_fetch_array($result)) 
     { ?> 
     <div id="draggable" style="width:300px; height:200px"> 
     <div class="thumbnail"> 
    <div class="control-group"> 
    <label class="control-label" for="inputEmail">product id</label> 
    <div class="controls"> 
    <input name="member_id[]" type="hidden" value="<?php echo $row['product_id'] ?>" /> 
     <input name="firstname[]" type="text" value="<?php echo $row['product_name'] ?>" /> 
    </div> 
    </div> 

    <div class="control-group"> 
    <label class="control-label" for="inputEmail">product category</label> 
    <div class="controls"> 
     <input name="lastname[]" type="text" value="<?php echo $row['product_category'] ?>" /> 
    </div> 
    </div> 
    </div></div> 

     <?php 
     } 
} 

?> 
<input name="" class="btn btn-success" type="submit" value="Update"> 
</form> 
</div></div> 

jQuery中

$(function() { 
    $("#draggable").draggable(); 
    }); 

現在我想用拖動每個盒子的，因爲你可以在它說的id =「拖動」代碼見，

可拖動是偉大的工程，我只能拖動第一盒但他們是多一個盒子，我將無法拖動其餘的盒子，我只有第一個盒子才能工作，爲什麼不工作其餘的盒子！

我錯了什麼！

感謝您的時間。

Answer 1

將可拖動ID更改爲類。 .draggable（）僅適用於第一個，因爲重複ID無效。

while($row = mysql_fetch_array($result)) 
     { ?> 
     <div class="draggable" style="width:300px; height:200px"> 
     <div class="thumbnail"> 
... 

$(function() { 
    $(".draggable").draggable(); 
});