jquery ui selectable and sortable combined

Question

This is what I got:
http://jsfiddle.net/hashie5/vk6rZ/
(don't mind the layout)

The first table is a combination of the second and third table, and it's this one that needs to be finished.

The seconds table has sortable (with the arrows).

The third table has selectable (dont click the arrows).

The goal is: when you select multiple items, you should be able to sort them all at the same time.

If it's to hard because of the tables, an example with lists would be great too.

In the helper function I tried cloning all selected (ui-selected class) items, but that was too buggy

EDIT:
I created a new fiddle: http://jsfiddle.net/hashie5/AZr9Z/
This works nice, but it's not 100% complete yet

Check this plugin: github.com/iamvery/jquery.multisortable and this question has a solution using draggable and droppable: stackoverflow.com/questions/3774755/… — jfrej
– jfrej, Commented Jun 15, 2012 at 10:55
thanks but I still want to use the sortable and selectable to have all functions available — Ruben
– Ruben, Commented Jun 19, 2012 at 14:49
@Ruben: hi, you say that clone is buggy, but did you see my example? it work nice for me. what do you think? — Luca Filosofi
– Luca Filosofi, Commented Jun 22, 2012 at 18:08

Luca Filosofi · Accepted Answer · 2018-04-28 17:50:00Z

12

demo http://so.lucafilosofi.com/jquery-ui-selectable-and-sortable-combined/

the main code look like below.

sort : function(event, ui) {
    var $helper = $('.ui-sortable-helper'), hTop = $helper.offset().top, hStyle = $helper.attr('style'), hId = $helper.attr('id');
    if (first_rows.length > 1) {
        $.each(first_rows, function(i, item) {
            if (hId != item.id) {
                var _top = hTop + (26 * i);
                $('#' + item.id).addClass('ui-sortable-helper').attr('style', hStyle).css('top', _top);
            }
        });
    }
},
start : function(event, ui) {
    if (ui.item.hasClass('ui-selected') && $('.ui-selected').length > 1) {
        first_rows = $('.ui-selected').map(function(i, e) {
            var $tr = $(e);
            return {
                tr : $tr.clone(true),
                id : $tr.attr('id')
            };
        }).get();
        $('.ui-selected').addClass('cloned');
    }
    ui.placeholder.html('<td colspan="99">&nbsp;</td>');
},
stop : function(event, ui) {
    if (first_rows.length > 1) {
        $.each(first_rows, function(i, item) {
            $(item.tr).removeAttr('style').insertBefore(ui.item);
        });
        $('.cloned').remove();
        first_rows = {};
    }
    $("#uber tr:even").removeClass("odd even").addClass("even");
    $("#uber tr:odd").removeClass("odd even").addClass("odd");
}

i'm not sure i understood what you want, anyway what the code actually do is:

from the 1st table, select multiple items;
by holding hover one of the selected items;
you are able to move those selected where ever you want in the list;
mantaining the sort order of all selected items;

hope this is what you are looking for.

edited Apr 28, 2018 at 17:50

answered Jun 22, 2012 at 8:59

Luca Filosofi

31.2k9 gold badges72 silver badges77 bronze badges

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

7 Comments

Ruben Over a year ago

I think this is it! I'm not at work now but I'll take a better look tormorrow, great

Ruben Over a year ago

any idea how I can expand the placeholder, so if I select 2 items, my placeholder will have 2 <tr> tags?

Ruben Over a year ago

and how can I give the bounty?

Luca Filosofi Over a year ago

@Ruben: dear, for the code look at the updated answer, for the bounty read this stackoverflow.com/faq#bounty. PS: if you want you can also check the top arrow and giv a +1 ;-)

Will Sampson Over a year ago

This works great for me however with a large amount of rows the sorting is very VERY slow, sometimes timing out. Why is that?

|

Alex Gray · Accepted Answer · 2012-06-21 05:00:41Z

2

+25

AFAICT your "jsfiddle" works pretty good… but whenever i get frustrated by jquery-ui annoyingly insisting on selecting text vs. whatyever else it should be doing, i refer to this snippet..

// disables text selection on sortable, draggable items 
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();

Not sure if you can just flip the "disable" to "enable", but there's my $.02. Also, its sort of a good idea, in case someone has a lame browser / device to possibly define an "inactive section" within the same "group" element, to provide a "handle" for the drag action… (like your fiddle's arrow-type-things) or else those clicks may relentlessly be mistaken as the intent to select/edit…

answered Jun 21, 2012 at 5:00

Alex Gray

16.5k9 gold badges99 silver badges122 bronze badges

Comments

Rafal Enden · Accepted Answer · 2015-04-09 10:15:53Z

Gist created by Matthew Andersen works perfectly: https://gist.github.com/mattandersen/9777423

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" />

    <style>
        #list {
            list-style: none;
            padding-left: 0;
        }

        #list .sort-handle {
            display: none;
        }

        #list .ui-selected .sort-handle
         {
            display: inline;
            padding: 0 0.5em;
            cursor: pointer;
        }

        li.ui-selected {
            background-color: #8888cc;
            color: white;
            font-weight: bold;
            background-image: none;
        }
        li.ui-selecting {
            background-color: #ccccff;
            color: white;
            background-image: none;
        }

    </style>
</head>
<body>
    <ul id="list">
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 1</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 2</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 3</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 4</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 5</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 6</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 7</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 8</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 9</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 10</li>
    </ul>

    <script>
        $(function() {
            $('#list').selectable({
                cancel: '.sort-handle'
            }).sortable({
                items: "> li",
                handle: '.sort-handle',
                helper: function(e, item) {
                    if ( ! item.hasClass('ui-selected') ) {
                        item.parent().children('.ui-selected').removeClass('ui-selected');
                        item.addClass('ui-selected');
                    }

                    var selected = item.parent().children('.ui-selected').clone();
                    item.data('multidrag', selected).siblings('.ui-selected').remove();
                    return $('<li/>').append(selected);
                },
                stop: function(e, ui) {
                    var selected = ui.item.data('multidrag');
                    ui.item.after(selected);
                    ui.item.remove();
                }
            });
        });
    </script>
</body>

Demo: http://jsfiddle.net/ghaq69b3/

Jimmery · Accepted Answer · 2012-06-16 11:41:34Z

1

Ive not tested this, but here is an idea:

Have the first list selectable (but not sortable) - then when a selection is finished, wrap the selection in a div and then make that div sortable - this way the selection should then drag as one.

answered Jun 16, 2012 at 11:41

Jimmery

10.2k25 gold badges90 silver badges166 bronze badges

1 Comment

Ruben Over a year ago

sounds like a great idea, but I have no idea how to to this :)

musefan · Accepted Answer · 2013-07-15 14:33:27Z

0

$( "#list" )
  .sortable({ handle: ".handle" })
  .selectable()
  .find( "li" )
  .addClass( "ui-corner-all" )
  .prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );

edited Jul 15, 2013 at 14:33

musefan

48.5k21 gold badges144 silver badges193 bronze badges

answered Jul 15, 2013 at 14:12

user2583831

1

Collectives™ on Stack Overflow

jquery ui selectable and sortable combined

5 Answers 5

7 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related