jquery ui selectable and sortable combined
https://stackoverflow.com/questions/10997914
-
14-06-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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
Solution
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"> </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.
OTHER TIPS
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…
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">‡</span>Item 1</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 2</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 3</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 4</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 5</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 6</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 7</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 8</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 9</li>
<li class="ui-widget-content"><span class="sort-handle">‡</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>
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.
$( "#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>" );
