Question

I created a while loop that produces five images. I then designed the images to be dragged onto a droppable section of the webpage. I then want the webpage to output the location of where I placed the image. My only problem is that I want the code to also echo out the src from where I got the image from. For some reason, whenever I click on any of the images and drag them, the page only echos out the src of the first image the while loop looped through.

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

Answer 1

Jason,

Try :

$(".ui-widget-content img").draggable({
    stop: function(event, ui) {
        var Stoppos = $(this).position();
        var className = $(this).attr("src");
        $(".location").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top + className);
    }
});