Does anybody know how to combine jQuery UI selectable and sortable ? This script: http://nicolas.rudas.info/jquery/selectables_sortables/ doesn't work in Chrome and it also has plugin modifications.
Asked
Active
Viewed 2.5k times
28
-
I have done it, but not with sortable and selectable, due to some copyright issues i cnt give u the code :), but i will show you instructions on how to :) – Val Feb 23 '11 at 13:06
5 Answers
34
Just found this very easy solution from rdworth:
CSS:
ul { width: 300px; list-style: none; margin: 0; padding: 0; }
li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
.ui-selecting { background: #eee; }
.ui-selecting .handle { background: #ddd; }
.ui-selected { background: #def; }
.ui-selected .handle { background: #cde; }
HTML:
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Javascript:
$( "#list" )
.sortable({ handle: ".handle" })
.selectable({ filter: "li", cancel: ".handle" })
.find( "li" )
.addClass( "ui-corner-all" )
.prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );
See: this fiddle.
mhu
- 17,720
- 10
- 62
- 93
-
This works pretty well. I had to pass these options to selectable so that it didn't treat the handles as separate selectable objects, and didn't start a selection when dragging them: `{ filter: 'li', cancel: '.handle' }` – Nick Apr 18 '13 at 15:06
-
-
I put this into a fiddle http://jsfiddle.net/scafrithuric/87zjB/ and it selects but won't sort. I tried in Chrome and IE11. Is it version dependent? – Karl Kieninger Feb 26 '14 at 18:10
-
@KarlKieninger: Your fiddle seems to work just fine in Firefox 27 and Chrome 33. What do you mean with 'won't sort'? – mhu Feb 26 '14 at 18:48
-
1@KarlKieninger: It also works with jQuery 2.1.1 and jQuery UI 1.10.4, see http://jsfiddle.net/87zjB/1/ – mhu Feb 26 '14 at 18:56
-
1@mhu: Yes it works. I was missing the use of the handle for sorting. so I just learned something. On the bright side, now your answer has some working fiddles with it. Thank you. – Karl Kieninger Feb 26 '14 at 19:09
-
1Great info! Really helped in answering this: http://stackoverflow.com/questions/38221956/jquery-ui-sorting-multiple-table-row-at-once – Twisty Jul 06 '16 at 21:51
5
This is as much as i can give u :) but the idea is there. its not alllll complete but hopefully u can play about with the values and see how it goes from there :)
Val
- 17,336
- 23
- 95
- 144
-
3@minnur, Saying thank you is good. Voting up the answer is even better :) – Tahir Akhtar Jul 19 '11 at 14:48
0
If you want to select multiple elements and MOVE THEM ALL to another list, this fiddle works well:
HTML:
<meta charset="utf-8" />
<title>jQuery UI Sortable with Selectable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<ul id="album" class="connectedSortable">
<li id="li1"><div>1- First</div></li>
<li id="li2"><div>2- Second</div></li>
<li id="li3"><div>3- Third</div></li>
<li id="li4"><div>4- Fourth</div></li>
<li id="li5"><div>5- Fifth</div></li>
<li id="li6"><div>6- Sixth</div></li>
<li id="li7"><div>7- Seventh</div></li>
<li id="li8"><div>8- Eighth</div></li>
</ul>
<ul id="album2" class="connectedSortable">
<li id="li1"><div>1- 1</div></li>
<li id="li2"><div>2- 2</div></li>
<li id="li3"><div>3- 3</div></li>
<li id="li4"><div>4- 4</div></li>
<li id="li5"><div>5- 5</div></li>
<li id="li6"><div>6- 6</div></li>
<li id="li7"><div>7- 7</div></li>
<li id="li8"><div>8- 8</div></li>
</ul>
<div id="anotheralbum" class="connectedSortable">
another album - no style for the lists inside here
</div>
<br style="clear:both">
</body>
Javascript:
<script>
$(function() {
//
$('body').selectable({
filter: 'li'
//filter: '#album2 > li'
});
/*
Since the sortable seems unable to move more than one object at a
time, we'll do this:
The LIs should act only as wrappers for DIVs.
When sorting a LI, move all the DIVs that are children of selected
LIs to inside the sorting LI (this will make them move together);
but before doing that, save inside the DIVs a reference to their
respective original parents, so we can restore them later.
When the user drop the sorting, restore the DIVs to their original
parent LIs and place those LIs right after the just-dropped LI.
Voilá!
Tip: doesn't work so great if you try to stick the LIs inside the LI
*/
$('.connectedSortable').sortable({
connectWith: ".connectedSortable",
delay: 100,
start: function(e, ui) {
var topleft = 0;
// if the current sorting LI is not selected, select
$(ui.item).addClass('ui-selected');
$('.ui-selected div').each(function() {
// save reference to original parent
var originalParent = $(this).parent()[0];
$(this).data('origin', originalParent);
// position each DIV in cascade
$(this).css('position', 'absolute');
$(this).css('top', topleft);
$(this).css('left', topleft);
topleft += 20;
}).appendTo(ui.item); // glue them all inside current sorting LI
},
stop: function(e, ui) {
$(ui.item).children().each(function() {
// restore all the DIVs in the sorting LI to their original parents
var originalParent = $(this).data('origin');
$(this).appendTo(originalParent);
// remove the cascade positioning
$(this).css('position', '');
$(this).css('top', '');
$(this).css('left', '');
});
// put the selected LIs after the just-dropped sorting LI
$('#album .ui-selected').insertAfter(ui.item);
// put the selected LIs after the just-dropped sorting LI
$('#album2 .ui-selected').insertAfter(ui.item);
}
});
//
});
</script>
CSS:
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#album {
list-style: none;
float: left;
width: 20%;
border: 1px solid red;
}
#album2 {
list-style: none;
float: left;
width: 20%;
border: 1px solid red;
}
#album li {
float: left;
margin: 5px;
}
#album2 li {
float: left;
margin: 5px;
}
#album div {
width: 100px;
height: 100px;
border: 1px solid #CCC;
background: #F6F6F6;
}
#album2 div {
width: 100px;
height: 100px;
border: 1px solid #CCC;
background: #F6F6F6;
}
#album .ui-sortable-placeholder {
border: 1px dashed #CCC;
width: 100px;
height: 100px;
background: none;
visibility: visible !important;
}
#album2 .ui-sortable-placeholder {
border: 1px dashed #CCC;
width: 100px;
height: 100px;
background: none;
visibility: visible !important;
}
#album .ui-selecting div,
#album .ui-selected div {
background-color: #3C6;
}
#album2 .ui-selecting div,
#album2 .ui-selected div {
background-color: #3C6;
}
#anotheralbum {
list-style: none;
float: left;
width: 20%;
height: 800px;
border: 1px solid blue;
}
</style>
This was modified from the example at http://www.pieromori.com.br/snippets/sortable_with_selectable.html thanks to Piero Mori.
snowtimber
- 168
- 1
- 9
0
Part of my jQuery base-arsenal includes the following, as it's usually annoying when you go to drag something and end up selecting text instead...
// 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. Without trying it though.. common sense suggests that you may need to define an inactive section within the same "group" element, to provide a "handle" for the drag action.... or else those clicks may relentlessly be mistaken as the intent to select/edit...
Alex Gray
- 16,007
- 9
- 96
- 118