0

フォルダーにあるランダムな画像を生成する単純な while ループを作成しました。これらの画像を Web ページのどこにでもドラッグできるようにしたいと考えています。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

ここで私は上記の問題のために完全なビンを作りました。

デモ http://codebins.com/bin/4ldqp9u

上記のドラッグ可能な問題を解決するには、最初に最新のjquery.jsおよびjquery-ui.js（jqueryプラグイン）javaスクリプトファイルをヘッダーに含め、同じクラスを持つすべてのセレクター（要素）にドラッグ可能な関数を適用する必要があります。これが発生した場合、複数の要素に同じ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 に答える
0

jqueryとjquery uiを含める必要があります。

あなたのようなコードが私のために働く

于 2012-07-24T04:55:12.053 に答える