jQuery可拖动只允许1个图像可拖动 [英] jQuery Draggable only allowing 1 image to be draggable

问题描述

我有一张充满图像，专辑封面的页面。我已经添加了代码，使其可拖动，它只允许我拖动页面上的第一个图像。

为什么是这样？

  $（document）.ready（function（）{
 $（＃draggable）。each（function（）{
 $ （this）.draggable（{
 revert：function（dropped）{
 var dropped = dropped&&& drop [0] .id ==droppable; 
 if（！ ）; 
 return！drop; 
} 
}）; 
}）; 
 
 $（＃droppable）。droppable（{
 drop：function（event，ui）{
 var AlbumToAdd = ui.draggable.data（id）; 
 if（AlbumToAdd！=''）{
 //执行ajax post 
 $ .post（/ ShoppingCart / DragToCart，{id：AlbumToAdd}，
函数（d ata）{
 //成功请求到达
 //更新页面元素
 $（'＃cart-total'）。text（data.CartTotal）; 
}）; 
} 
} 
}）; 
 
}）; 
  

如果您需要查看更多代码

解决方案

通常 id 应该是唯一的。所以这样做 $（＃draggable）。每个... 通常不是一个好习惯。将此更改为类选择器应该可以解决问题。

因此将其转换为：

 code> $（。draggable）。each（function（）{... 
  

你的html进入

 < div class =draggableclass =ui-widget-content> 
< p>将我拖到< / p> 
< / div> 
  

您可以看到我的工作示例（简化） here 。

I have a page full of images, album artwork to be precise. I have added code to make it draggable and it will only allow me to drag the first image on the page.

Why is this?

 $(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);
                            });
                    }
                }
            });

        });

Comment if you need to see more code

解决方案

Usually id's are supposed to be unique. So doing $("#draggable").each... is usually not a good practise. Changing this into a class selector should solve the issue.

So transform it into:

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

And your html into

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

You can see my working example (simplified) here.

这篇关于jQuery可拖动只允许1个图像可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！