jquery draggable/droppable issue

Question

Hey guys I have a drag and drop function that does not fully work. What I want to do is be able to drag and drop a picture into a div and have that picture pop up in the div. I have a list of 2 pictures right now, so I have the following function echoed for each picture. Both pictures are draggable and droppable, but the first one is the only one that appears in the div, regardless of which picture gets dragged in. I am not sure what is wrong because the jquery function seems to be unique to each picture. If any one has any suggestions I would appreciate it greatly.

while ($row = mysql_fetch_assoc($query)) {

$image=htmlentities($row['image']); //image name

$uniqid=uniqid(); //unique id for jquery functions

$dirname = "usercontent/$user/images/$image"; 

echo "<img id=\"$uniqid\" src=\"$dirname\" width=\"75\" height=\"75\"/>";

echo "<script>
$(function() {
$(\"#$uniqid\").draggable({ scroll: true, scrollSensitivity: 10, scrollSpeed: 10, revert: true, helper: 'clone', cursorAt: { cursor: 'move', top: 27, left: 27 } });
$(\"#droppable2, #droppable-background , #droppable2-innerer\").droppable({
            greedy: true,
            activeClass: 'ui-state-hover',
            hoverClass: 'ui-state-active',
            drop: function(event, ui) {
                $(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
                $('#droppable-background').css(\"background-image\",\"url($dirname)\");
            }
        });
});
</script>";

}

Answer 1

Don't use the ID to set up a draggable item, it is best to just use a class you can put on all of them. From the code above it appears that you are using a single ID, maybe that's why only one picture works? And are you setting up 3 drop zones?

I set up a working demo and I added a bunch of comments to help you see how this could be done.

CSS

#draggable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ddd;  }
#droppable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ccc; }
.dragme { background: #999; text-align: center; width: 100px; padding: 5px; }
.fade { opacity: 0.3 }
.ui-state-highlight { border: #333 1px solid; }

HTML

<div class="demo">

    <div id="draggable" class="ui-widget-content">
        <p>Drag from here</p>
        <div class="dragme"><img src="image1.gif"><br><span class="caption">Drag me to my target</span></div>
        <div class="dragme"><img src="image2.gif" height="100"><br><span class="caption">Drag me to my target</span></div>
    </div>

    <div id="droppable">
        <p>Drop here</p>
    </div>

</div>

Script

$(document).ready(function(){

 // set up the draggable items
 $(".dragme").draggable({
  helper : 'clone',                 // you will drag a copy of the item around
  revert : true,                    // draggable returns home if released
  start: function(e,ui){
   $(this).addClass('fade');        // fade out original item while dragging the clone
   ui.helper.find('.caption').text("I'm being dragged!"); // message in clone
  },
  stop: function(e,ui){
   $(this).removeClass('fade');     // remove fade if dragged item is released
  }
 });

 $("#droppable").droppable({
  drop: function(e, ui) {
   $(this).addClass('ui-state-highlight');            // add drop box highlight (border)
   ui.draggable.appendTo($(this)).removeClass('fade') // move item to drop box & un-fade
    .find('.caption').text("I've been dropped");      // change caption
   ui.helper.remove();                                // remove clone
  }
 });

})

---

Edit: Hiya, if you look at the overview page of the Draggable and Droppable document page, you will see that the plugin defines extra variables (actually they are jQuery objects) for you: "ui.draggable" is the selected draggable element & "ui.helper" is the clone of the object.

I have updated the demo with what you requested.. it should now place the image as the background of the drop box. Here is just the updated portion of the script:

 $("#droppable").droppable({
  drop: function(e, ui) {
   $(this).addClass('ui-state-highlight');            // add drop box highlight (border)
   var src = ui.draggable.find('img').attr('src');    // get img URL
   $('#droppable')
       .css({
           backgroundImage    : 'url(' + src + ')',   // set background image
           backgroundPosition : 'center center',      // position background image
           backgroundRepeat   : 'no-repeat'           // don't repeat image
       });
   ui.helper.remove();                                // remove clone
  }
 });