0

我创建了一个简单的 while 循环，可以生成文件夹中的随机图像。我希望能够将这些图像拖到我网页上的任何位置。我使用了 jQuery 的可拖动功能，但它不起作用。我的问题是这是否有效？这是简化的代码。

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

4 回答 4

1

通常，在页面上使用相同 id 的多个元素不是最好的主意

尝试做这样的事情也许会有所帮助

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

并按类获取元素

$(".ui-widget-content").draggable();
于 2012-07-24T04:22:39.347 回答
1

您的源代码不包括 jquery 插件。尝试将其放在 de</head>标签之前

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
于 2012-07-24T04:48:51.420 回答
0

您应该包括jquery和jquery ui。

类似于您的代码对我有用

于 2012-07-24T04:55:12.053 回答
0

在这里，我已经为上述问题完成了完整的垃圾箱。

演示 http://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-24T06:44:22.310 回答