javascript - 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 .