Question

I am trying to do a timeline. The timeline have few dynamically keyframe elements placed with absolute position on random positions.
Is there a way to get the Previous and Next element relative to a draggable dragger? Something like “if the #dragger is at left:55px, the next element is .keyframe 102px at left: 102px and previous element is .keyframe 32px at left:32px”.

I have a demo at http://jsfiddle.net/3pXC9/1/ just drag the red bar around, on drag I should get its “siblings” based on position.

Thank you

Answer 1

Something like this?

Demo: http://jsfiddle.net/3pXC9/11/

Javascript used:

stop: function(event, ui) {
        var this_left = $(this).position().left;
        var keyframes = $(".keyframe");
        var closest_left = [null,0], closest_right = [null,0];

        keyframes.each(function(index) {

                var t = $(this);
                var offset = t.position().left - this_left;
                if (offset >= 0) {
                        if (closest_right[0] == null || offset < closest_right[1]) {
                                closest_right[0] = t;
                                closest_right[1] = offset;
                        }
                }
                else {
                        if (closest_left[0] == null || offset > closest_left[1]) {
                                closest_left[0] = t;
                                closest_left[1] = offset;
                        }
                }
        });
        /*
        closest_left[0] = closest element to the left (null if none)
        closest_left[1] = offset relative to the dragger
        the same goes for closest_right
        */
}