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

回答

相關問題