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。