jQuery可拖动函数和while循环

我创建了一个简单的while循环，用于生成我的文件夹中的随机图像。我希望能够将这些图像拖放到我的网页上的任何位置。我用jQuery的可拖动函数，但它不起作用。我的问题是，这甚至工作？这里是简化的代码。jQuery可拖动函数和while循环

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

来源

2012-07-24 jason328

通常它不是最好的办法，以在页面上的几个元素具有相同id

尝试做这样的事情，也许它可以帮助

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

和

类获得元素

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

来源

2012-07-24 04:22:39

感谢您的帮助和建议。我将选择器更改为.ui-widget-content，但它仍然不起作用。 – jason328 2012-07-24 04:25:45

@ jason328你可以从视图源显示代码隐藏，实际上生成 – 2012-07-24 04:30:47

当然可以。添加到我的问题。 – jason328 2012-07-24 04:40:24

你的源代码不包括jquery插件。尝试把这个德</head>标签

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

来源

2012-07-24 04:48:51 nicowernli

它在那里。我只是拿出来简化问题。 – jason328 2012-07-24 04:50:50

是jquery ui插件吗？尝试粘贴完整的源代码。 – nicowernli 2012-07-24 04:53:31

我忘了jQuery UI。这是我第一次使用UI。对于那个很抱歉。它现在有效。 – jason328 2012-07-24 04:56:26

之前，您应该包括jquery和jquery ui。

类似你这样的code对我的作品

来源

2012-07-24 04:55:12

在这里，我已经做了上述问题完全箱。

DEMOhttp://codebins.com/bin/4ldqp9u

为了解决上述问题，拖动，你必须首先包括最新的jquery.js和jQuery-ui.js（jQuery插件）的Java脚本文件头和所有选择适用拖动功能（元素），它有相同的类说“ui-widget-content”，因为我们不应该在多个元素上设置相同的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(); 
});

来源

2012-07-24 06:44:22 gaurang171

jQuery可拖动函数和while循环

回答

相关问题