jQuery UI - Combining Selectable with Draggable

Question

As the question states, I'm trying to combine jQuery UI's Selectable and Draggable functions into a working drag-n-drop interface with the user being able to select multiple divs and move those divs into jQuery Droppables.

Here is the code I have to allow the user to select divs across a row in a table:

    $('tr').selectable({
        filter: 'div',
        selected: function(event, ui) {
            $(ui.selected).draggable({
                containment: 'document',
                axis: 'y',
                snap: true,
                snapMode: 'inner',
                revert: 'invalid',
                opacity: 0.8,
                drag: function(e, ui) {
                    $('.ui-selected').css({
                        top : ui.position.top //Y-Axis Only
                    });
                    $('.ui-selected').addClass('ui-draggable-dragging');
                },
                stop: function() {
                    $('.ui-selected').removeClass('ui-selected ui-draggable');
                }
            });
        }
    });

As you can see, I've tried adding the known classes that jQuery UI adds to elements being dragged/selected/etc, but the only element that seems to act as an actual draggable is the one that the user has clicked on (is actually dragging).

My desire is to have the user drag the entire selected group, and have them all act as draggables (ie: revert on invalid, snap to droppable, etc)

Does anyone have any idea how to do this or where to go from here?

Also, here is a jsfiddle to demonstrate exactly what I mean (and where I'm currently at on this). You might have to resize the results view so the table cells are all the same width.

takacsot · Accepted Answer · 2012-12-10 11:04:34Z

1

Simulate the behavior.

when selecting multiple item just mark them as selected manually (e.g. checkbox, add custom style, etc)
when dragging use draggable option helper to define custom clone helper : function(){ return "<p>custom item</p>" }, this will hide individual items. And you can customize as you want.
Custom drop implementation which using those selected items to append into the proper place.

answered Dec 10, 2012 at 11:04

takacsot

1,7772 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI - Combining Selectable with Draggable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related