jQuery Draggable只允許1圖像可拖動

Question

我有一個頁面充滿了圖像，專輯圖稿是精確的。我添加了可拖動的代碼，它只允許我拖動頁面上的第一張圖片。

這是爲什麼？

$(document).ready(function() { 
      $("#draggable").each(function() { 
       $(this).draggable({ 
        revert: function (dropped) { 
         var dropped = dropped && dropped[0].id == "droppable"; 
         if (!dropped); 
         return !dropped; 
        } 
       }); 
      }); 

      $("#droppable").droppable({ 
       drop: function (event, ui) { 
        var AlbumToAdd = ui.draggable.data("id"); 
        if (AlbumToAdd != '') { 
         // Perform the ajax post 
         $.post("/ShoppingCart/DragToCart", { "id": AlbumToAdd }, 
          function (data) { 
           // Successful requests get here 
           // Update the page elements 
           $('#cart-total').text(data.CartTotal); 
          }); 
        } 
       } 
      }); 

     }); 

評論，如果您需要查看更多代碼

Answer 1

通常ID的都應該是獨一無二的。這樣做$("#draggable").each...通常不是一個好習慣。將其改爲類選擇器應該可以解決問題。

所以將其轉化爲：

$(".draggable").each(function() { ... 

，並將HTML到

<div class="draggable" class="ui-widget-content"> 
    <p>Drag me around</p> 
</div> 

你可以看到我的工作示例（簡化）here。