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。

jQuery Draggable只允许1个图像可拖动

1 个答案: