Question

我创建了一个简单的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>

Answer 1

通常，在页面上具有相同ID

的多个元素并不是最好的选择

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

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

并按类获取元素

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

Answer 2

您的源代码不包含jquery插件。尝试在de </head>标记

之前添加此内容

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

Answer 3

您应该加入jquery和jquery ui。

类似于你的code为我工作

Answer 4

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

DEMO http://codebins.com/bin/4ldqp9u

要解决上面的可拖动问题，你必须首先在头文件中包含最新的jquery.js和jquery-ui.js（jquery插件）java脚本文件，并在所有选择器（元素）上应用draggable函数，这些选择器具有相同的类“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();
});

jQuery可拖动函数和while循环

4 个答案: