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: https://github.com/iamvery/jquery.multisortable and this question has a solution using draggable and droppable: http://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items — jfrej, Jun 15 '12 at 10:55
thanks but I still want to use the sortable and selectable to have all functions available — Ruben, Jun 19 '12 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, Jun 22 '12 at 18:08

Luca Filosofi · Accepted Answer · 2018-04-28T17:50:00.623

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 '18 at 17:50

answered Jun 22 '12 at 08:59

Luca Filosofi

30,905
9
70
77

1

I think this is it! I'm not at work now but I'll take a better look tormorrow, great – Ruben Jun 25 '12 at 14:56
any idea how I can expand the placeholder, so if I select 2 items, my placeholder will have 2 tags? – Ruben Jun 26 '12 at 09:41
and how can I give the bounty? – Ruben Jun 26 '12 at 09:41
@Ruben: dear, for the code look at the updated answer, for the bounty read this http://stackoverflow.com/faq#bounty. PS: if you want you can also check the top arrow and giv a +1 ;-) – Luca Filosofi Jun 26 '12 at 21:08
This works great for me however with a large amount of rows the sorting is very VERY slow, sometimes timing out. Why is that? – Will Sampson Feb 14 '13 at 23:45
@Will Sampson: i have created a better demo with 500 entries and it seams to work nice! let me know. – Luca Filosofi Feb 15 '13 at 18:07
I was setting the width for all the sortable elements being dragged in the helper. This was too much work for the page with more than 40 rows apparently. I got around this by just making the row you drag move with the cursor while the rest of the selected items move instantly when you stop dragging. I have other issues with many rows but they are unrelated to this i think. – Will Sampson Feb 16 '13 at 00:39

score 2 · Answer 2 · answered Jun 21 '12 at 05:00

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…

score 2 · Answer 3 · answered Apr 09 '15 at 10:15

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/

score 1 · Answer 4 · answered Jun 16 '12 at 11:41

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 '12 at 11:41

Jimmery

9,783
25
83
157

sounds like a great idea, but I have no idea how to to this :) – Ruben Jun 21 '12 at 07:05

score 0 · Answer 5 · edited Jul 15 '13 at 14:33

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 '13 at 14:33

musefan

47,875
21
135
185

answered Jul 15 '13 at 14:12

user2583831

1

jquery ui selectable and sortable combined

5 Answers5