Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example of using JQuery UI Selectable with Sortable. Supports dragging multiple selected items at once.
<!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>
@julienborrel

This comment has been minimized.

Show comment
Hide comment
@julienborrel

julienborrel Jul 24, 2015

Hello Matt,
Thanks for your code, I need multi select/sort for a project.
I just dont get it to save the order of the item with serialize method.
Ex: assuming I move (1 + 2) after (3), serialize give me: [3,1,4,5,6,...]

Here is the live example in codepen: http://codepen.io/julienborrel/pen/aORWgg

If you know how update event can "wait" for the moving items, let me know.

julienborrel commented Jul 24, 2015

Hello Matt,
Thanks for your code, I need multi select/sort for a project.
I just dont get it to save the order of the item with serialize method.
Ex: assuming I move (1 + 2) after (3), serialize give me: [3,1,4,5,6,...]

Here is the live example in codepen: http://codepen.io/julienborrel/pen/aORWgg

If you know how update event can "wait" for the moving items, let me know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment