JQuery Get previous and next item in Drag

Question

I'm trying to make a timeline. The timeline has several dynamically keyframe elements placed with an absolute position at random positions. Is there a way to get the Previous and Next element relative to draggable dragger? Something like "if #dragger is on the left: 55px, the next element is .keyframe 102px on the left: 102px, and the previous element is .keyframe 32px on the left: 32px".

I have a demo at http://jsfiddle.net/3pXC9/1/ just drag the red bar around, when dragging I have to get my “brothers and sisters” depending on the position.

thank

Answer 1

Something like that?

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

Used Javascript:

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
        */
}