Search jQuery

jQuery Forum

Using jQuery UI

glenrobert

Draggable: Move Other Elements in Relation to Dragged Element

in Using jQuery UI • 12 years ago

Hello,

I have photo gallery. Images are listed in a single container:

<div>
<img id="img_1" src="">
<img id="etc" src="">
<img id="img_3">
<img id="etc" src="">
<img id="etc" src="">
<img id="etc" src="">
</div>

The dragging works fine. What I want to do is when I drag the image, for example #img_3, is move the two images around it in exact relation to it as I drag it. Think of all the images in a horizontal line. Only one image shows at a time. I just can't figure out how to attach the two images (on either side of it) to the draggable image as it's moving so I can change their position on the fly. Currently I simply have this for the draggable image:

$('#portfolio_items img').draggable({
axis: "x"
});

Is there someway to actually drag the other two images at the same time in exact relation to the image being dragged?

I thought about simply attaching an event to the image being dragged and move the other images on the fly, but couldn't figure out how to do that.

Any help would be appreciated.

Thanks,

Glen

Replies(1)

glenrobert

Re: Draggable: Move Other Elements in Relation to Dragged Element

12 years ago

For anyone interested, here's what I've come up with which has me on the right track, though there is still a lot to do:

var off_set = $(window).width();

$('#portfolio_items img').draggable({
    axis: "x",
    drag: function()
        {
            $('#portfolio_items img').hover(); // grab $(this)

            // get ids of images in gallery sequence before and after
            var prev_img = $(this).attr('rel'); // rel
            var next_img = $(this).attr('name');; // name

            // put the other images in position
            // (images are absolutely positioned)
            var main_img_left = $(this).offset().left;
            var prev_img_left = main_img_left + off_set;
            var next_img_left = main_img_left - off_set;

            // move the other images in relation to the image being dragged
            $('#'+prev_img).css('left', prev_img_left);
            $('#'+next_img).css('left', next_img_left);

        }
    });

This is working pretty well except when the browser window is quite large. With the latter there is a gap between the images as they are moving, when the window is normal to smaller size there is no gap.

Top Reply

Response title

Attachments

jQuery Forum

Draggable: Move Other Elements in Relation to Dragged Element

Replies(1)

Re: Draggable: Move Other Elements in Relation to Dragged Element

Statistics

Tags

Actions

Related Posts