Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to link two jquery.ui draggables together?

I have two jquery.ui draggables. I am constraining their movement to the y-axis. If one is dragged to a certain y-position, I want the other to automatically move to the same y-position and vice versa. Has anyone ever linked two of these together before?

like image 667
jaketrent Avatar asked Jan 04 '10 04:01

jaketrent


People also ask

How do you make something draggable in jQuery?

Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port. If the value of this option is set to false, it will prevent the DOM elements to be dragged .

Does jQuery UI need jQuery?

JQuery UI is a separate project containing a library of reusable widgets that relies on JQuery. JQuery UI is available for plugins to use, but it should not be used in core code.

What is jQuery draggable?

jQuery UI draggable() method is used to make any DOM element draggable. Once the element is made draggable, you can move it by clicking on it with the mouse and drag it anywhere within the viewport.

How do you make a draggable element?

To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page. Our example creates an interface to rearrange columns that have been laid out with CSS Grid.


2 Answers

Updated: Script and demo updated so it is no longer restricted to the y-axis while dragging.

This script looks for the class "group" followed by a number to drag/drop these combined objects. I posted a demo here.

HTML

<div class="demo">
<div id="draggable">
 <p>Drag from here</p>
 <div class="dragme group1"><img src="image1.jpg"><br>Group 1</div>
 <div class="dragme group1"><img src="image2.jpg"><br>Group 1</div>
 <div class="dragme group2"><img src="image3.jpg"><br>Group 2</div>
 <div class="dragme group2"><img src="image4.jpg"><br>Group 2</div>
</div>
<div id="droppable">
 <p>Drop here</p>
</div>
</div>

Script

$(document).ready(function() {
    // function to get matching groups (change '.group' and /group.../ inside the match to whatever class you want to use
    var getAll = function(t) {
        return $('.group' + t.helper.attr('class').match(/group([0-9]+)/)[1]).not(t);
    };
    // add drag functionality
    $(".dragme").draggable({
        revert: true,
        revertDuration: 10,
        // grouped items animate separately, so leave this number low
        containment: '.demo',
        stop: function(e, ui) {
            getAll(ui).css({
                'top': ui.helper.css('top'),
                'left': 0
            });
        },
        drag: function(e, ui) {
            getAll(ui).css({
                'top': ui.helper.css('top'),
                'left': ui.helper.css('left')
            });
        }
    });
    $("#droppable").droppable({
        drop: function(e, ui) {
            ui.draggable.appendTo($(this));
            getAll(ui).appendTo($(this));
        }
    });
});
like image 148
Mottie Avatar answered Oct 19 '22 23:10

Mottie


I haven't done this before, but I suggest using the drag event to adjust the position of the respective other element:

$('.selector').draggable({
    ...,
    drag: function(event, ui) {

    },
    ...
});

The ui object will contain information (in the property ui.offset) you can use to manually reposition the other element.

like image 31
Tom Bartel Avatar answered Oct 20 '22 01:10

Tom Bartel