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

Kaminski

Check this plugin: github.com/iamvery/jquery.multisortable and this question has a solution using draggable and droppable: #3775255 – Damsel

thanks but I still want to use the sortable and selectable to have all functions available – Kaminski

@Ruben: hi, you say that clone is buggy, but did you see my example? it work nice for me. what do you think? – Gilli

Answer 1

• 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:

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

hope this is what you are looking for.

Gilli

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

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

and how can I give the bounty? – Kaminski

@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 ;-) – Gilli

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

@Will Sampson: i have created a better demo with 500 entries and it seams to work nice! let me know. – Gilli

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. – Coolidge

Answer 2

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…

Alber

Answer 3

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/

Eagleeyed

Answer 4

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.

Doublestop

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

Answer 5

$( "#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>" );

Simmonds