jQuery可拖动函数和while循环 - jQuery draggable function and while loops

我创建了一个简单的while循环，它可以生成文件夹中的随机图像。我希望能够把这些图片拖到我的网页上的任何地方。我为jQuery使用了draggable函数，但它不起作用。我的问题是这样行吗？这是简化的代码。

<script>
    $(document).ready(function(){
        $(function() 
        {
            $("#draggable").draggable();
        });
    });
</script>
<?php
$num_dresses = dress_count ();
$i = 0;
while ($i < 5)
{   
    $rand_id = rand(1, $num_dresses);
    $dress_feed_data = clothing_data($rand_id, 'file_name');    
    $new_file_name = html_entity_decode($dress_feed_data['file_name']); 
    if (file_exists('fashion_images/' . $new_file_name))
    {
?>
<div id="draggable" class="ui-widget-content">
<img src=" fashion_images/<?php echo $new_file_name;?> " width="70" height="70"/>
</div>
<?php } 
    $i++;
}
?>

这是作为页面源代码查看的代码。我删掉了任何与问题无关的东西。

<?xml version="1.0"?>
<html>
    <head>
        <script>
        $(document).ready(function(){
            $(function() 
            {
                $(".ui-widget-content").draggable();
            });
        });
        </script>
        <style>
            #draggable { width: 50px; height: 50px; padding: 0.5em; }
        </style>
    </head>
    <body>
        <div class="ui-widget-content">
            <img src=" fashion_images/blouse_belk's_0 " width="70" height="70"/>
        </div>
        <div class="ui-widget-content">
            <img src=" fashion_images/red|nail|polish_opi_0 " width="70" height="70"/>
        </div>
        <div class="ui-widget-content">
            <img src=" fashion_images/brown|pants_community|store_0 " width="70" height="70"/>
        </div>
        <div class="ui-widget-content">
            <img src=" fashion_images/jeans_larry_0 " width="70" height="70"/>
        </div>
        <div class="ui-widget-content">
            <img src=" fashion_images/pepsi|tshirt_target_1 " width="70" height="70"/>
        </div>
    </body>
</html>

通常情况下，在页面上有几个具有相同id 的元素不是最好的主意

试着这样做也许对有帮助

<div class="ui-widget-content">

并按类别获取元素

$(".ui-widget-content").draggable();

您的源代码不包括jquery插件。试着把这个放在去</head>标签之前

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

您应该包括jquery和jquery ui。

类似于您的代码适用于我

这里我已经为上述问题完成了完整的bin。

演示http://codebins.com/bin/4ldqp9u

为了解决上述可拖动问题，你必须首先在头中包含最新的jquery.js和jquery-ui.js（jquery-plugin）java脚本文件，并在所有具有相同类的选择器（元素）上应用draggable函数，比如"ui小部件内容"，因为我们不应该在多个元素上设置相同的id。如果发生这种情况，那么jquery就无法工作，因为它无法识别正确的元素，只在第一个元素上应用函数。

HTML:

<div class="ui-widget-content">
  <img src="http://www3.pictures.fp.zimbio.com/Paris+Fashion+Week+Chanel+Spring+Summer+2009+0IojzkQwqGlt.jpg" width="70" height="70"/>
</div>
<div class="ui-widget-content">
  <img src="http://www.fashion-doll-guide.com/images/2010-hallmark-barbie-christmas-ornaments-3.jpg" width="70" height="70"/>
</div>
<div class="ui-widget-content">
  <img src="http://www.fashion-doll-guide.com/images/Holiday-Barbie-Dolls.jpg" width="70" height="70"/>
</div>
<div class="ui-widget-content">
  <img src="http://www1.pictures.stylebistro.com/gi/KW+Kanye+West+Runway+Paris+Fashion+Week+Spring+rq5fOR7SZfjt.jpg" width="70" height="70"/>
</div>
<div class="ui-widget-content">
  <img src="http://www.theuniuni.com/media/catalog/product/cache/1/small_image/70x70/9df78eab33525d08d6e5fb8d27136e95/f/a/fashion-waterproof-platform-mature-horse-fur-01.jpg" width="70" height="70"/>
</div>

CSS:

.ui-widget-content{
  display:inline-block;
  cursor:move;
}
.ui-widget-content img{
  border:1px solid #112266;
}

jQuery:

$(function() {
    $(".ui-widget-content").draggable();
});