Question

I have a droppable container with >1 draggables in it. I want to simply be able to see the position of each draggable every time any one of them is dragged. Sounds easy, but I’m having a tough time figuring it out. Here’s what I have:

<script type="text/javascript">
$(function() {
    $("#draggable").draggable({ containment: '#droppable' });
    $("#draggable2").draggable({ containment: '#droppable' });
    $("#droppable").droppable({
        drop: function(event, ui) {
            document.getElementById('position1').value = ui.position.top + ', ' + ui.position.left; 
        }
    });

});
</script>

Basically, where I have the position1 input id gathering the position, I want to have a second line do the same thing for the other draggable.

Answer 1

In your case, you don’t need to use the ui parameter. Since you know what elements are draggable, you can select them specifically and find their positions. Also, since you’re using jQuery, do yourself a favor and replace document.getElementById with $. 🙂