jquery draggable/droppable issue
- by Scarface
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>";
}
