5 つの画像を生成する while ループを作成しました。次に、Web ページのドロップ可能なセクションに画像をドラッグできるように設計しました。次に、画像を配置した場所の場所を Web ページに出力させます。私の唯一の問題は、コードが画像を取得した場所から src もエコーアウトすることです。何らかの理由で、いずれかの画像をクリックしてドラッグすると、while ループがループした最初の画像の src のみがページに表示されます。
<script type="text/javascript">
$(".droppable").droppable();
</script>
<?php
$num_dresses = dress_count ();
$i = 0;
while ($i < 5)
{
$rand_id = rand(1, $num_dresses);
$new_file_name = html_entity_decode($dress_feed_data['file_name']);
if (file_exists('fashion_images/' . $new_file_name))
{
?>
<script type="text/javascript" >
$(document).ready(function(){
$(function()
{
$(".ui-widget-content").draggable(
{
stop: function(event,ui)
{
var Stoppos = $(this).position();
var className = $("img").attr("src");
$(".location").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top +
className);
}});});});
</script>
<div class="ui-widget-content">
<img src="fashion_images/<?php echo $new_file_name;?> " width="70" height="70"/>
</div>
<?php
}
$i++;
}
?>
<div class="droppable"></div>
<div class="location"></div>