Question

Newbie question :o)

I’m trying to generate a horizontal line with jQuery Draggable objects and get the “position” offset from ul li tags. The problem is to set the offset of alla objects from start.

Anyone?

Thanks!

http://jsfiddle.net/pYZYz/

<script src="http://code.jquery.com/jquery-1.5.2rc1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

<br>
<div id="slider">
    <ul id="objects"> 
      <li position="300"> 
        1 
      </li> 

      <li position="30"> 
        2                  
      </li> 

       <li position="100"> 
        3 
      </li> 

    </ul> 
</div>

<br>

<p>
    Position:
    <input type="text" id="val" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

$(document).ready(function() 
{    

    $("ul li").draggable
    ({
        containment: "#slider",
        axis: "x",
        snap: false,
        drag: function(event, ui)
        {
            $("#val").val(ui.position.left);

        }   

    });

    $("ul li").offset({left: $(this).attr('position')});

});​

Answer 1

You have to use “each” to set the position.

$(document).ready(function() 
{


        $("ul li").draggable
        ({
            containment: "#slider",
            axis: "x",
            snap: false,
            drag: function(event, ui)
            {
                $("#val").val(ui.position.left);

            }   

        });

        $('ul li').each(function(index) {
            $(this).offset({left: $(this).attr('position')});
        });

    });​