jQuery - 使用 img.draggable (jQuery UI) 从数组中随机元素答案

【问题标题】：jQuery - random elements from an array using img.draggable (jQuery UI)jQuery - 使用 img.draggable (jQuery UI) 从数组中随机元素
【发布时间】：2012-01-24 12:57:32
【问题描述】：

我正在使用此代码在页面中打印 3 个具有随机起始位置的可拖动图像：

<script type="text/javascript">
$(document).ready(function() {$('img.draggable').each(function(i,el){

var tLeft = Math.floor(Math.random()*800),
    tTop  = Math.floor(Math.random()*400);

$(el).css({position:'absolute', left: tLeft, top: tTop});

});
$("img.draggable").draggable();
});    
</script>

在正文中：

<img src="xxx.xxx" class="draggable" width="260px" height="155px">
<img src="xxxx.xxx" class="draggable" width="300px" height="225px">
<img src="xxxx.xxx" class="draggable" width="225px" height="150px">

获取图片。（总是 3）

现在代码运行良好，我需要多一步：

有没有办法从一个大数组（例如 10 个 gif 元素）中随机获取 3 个 gif 图像

我尝试添加功能，但元素丢失了可拖动类。

所以，我在一个页面上有 3 个可拖动元素，起始位置是随机的，我需要在每次刷新时从更大的随机数组中获取这 3 个元素。

对不起，我可怜的 js，非常感谢您的关注。

【问题讨论】：

标签： jquery arrays random

【解决方案1】：

试着去做

$(el).attr('src', genRandomFilename());

就在$(el).css(... 之后。然后在应用可拖动功能之前设置图像源。

【讨论】：

【解决方案2】：

如果图像数量是固定的，即 3，那么您可以使用 jQuery 更改图像 src。否则，您可以使用 jQuery 创建图像并添加到页面。然后应用 jQuery UI 的可拖动功能。它应该可以工作。

<script>
var imgArray = [];
$(document).ready(function(e) {
    $("img.draggable").each(function(index, element) {

        var tLeft = Math.floor(Math.random()*800);
        var tTop  = Math.floor(Math.random()*400);

            $(element).css({position:'absolute', left: tLeft, top: tTop});
            $(element).draggable();     

    });
});
</script>


<img src="test.jpg" class="draggable" width="120" height="120">
<img src="test.jpg" class="draggable" width="120" height="120">
<img src="test.jpg" class="draggable" width="120" height="120">

【讨论】：