Question

After searching a day and trying some solutions none worked for me.

Draggables are list items inside <ul>. Droppable is on div next to it. Basic dragging for now, now cloning no helpers.

Onclick i want to:

• get all the draggables positions from the droppable area. (absolute positions relative to document)

  • note: every <li> in the draggables position got an unique ID. (draggables list are build from ajax callback and so added the id while parsing xml: <li id="'+uid+'">…
  • I wish to retrieve all the positions in a string format, something like:
    var send_new_positions = “id1;x1,y2;id2;x2,y2”; Example: “1;108,57” means: li with id=1, xPos=108, yPos=57.

Problem:

I can’t old fashioned way onclick collect all list items inside the draggable area because there arent any. In debugger i see they don’t work that way, droppable stays clean, draggables are updated with inline styles, example: <li style="position: relative; left: -270px; top: 127px;" class="ui-draggable dropped">…

Should i instead build a selector for the draggables that finds each <li> with the class “ui-draggable dropped” and then extracts the positions?
I think that’s the harder way to go, after all i only get relative positions.

Should i instead add my logic to the drop: function() and add my string format to every <li> that is dropped. If so, how should i attach this string data to every dropped <li>?

What is the best way to go?

Answer 1

Loop on all your draggable elements and construct your string :

$('#myButton').click(function(){
    var myStringPosition = null;
    $('.ui-draggable').each(function(){
        myStringPosition = $(this)[0].id + ';' + $(this).css('left') + ';' + $(this).css('top');
    });

    alert(myStringPosition);
});