jQuery UI selectable, with flow selection instead of box selection [duplicate]
I want to use something similar to jQuery UI's Selectable. But it operates strictly on a dragged rectangle, and I want something that operates on a flow layout (like selecting text).
As an example, if I go to the Selectable "display as grid" demo, click on "3", and drag to "6", Selectable selects everything in that rectangle:
What I want instead is for it to select all the numbers from 3 to 6. (It should probably also disable the dotted-line rectangle as well, since it doesn't make sense for this type of selection.) Like this (again dragging from 3 to 6):
Selectable has an event that it fires as items are selected and deselected during the drag, but I don't see any way to alter its "which items are selected" list fr开发者_C百科om that event, or to plug in a custom "how do I tell which items should be selected?" algorithm.
How can I get Selectable to select items by logical order instead of by pixel position?
i think it may help you!
var indices = [];
$( "#selectable" ).selectable({
selecting: function(event, ui) {
indices.push($(ui.selecting).index());
select();
},
unselecting: function(event, ui) {
var index = $(ui.unselecting).index();
for(var i = 0; i < indices.length; i++)
if(indices[i] == index)
indices.splice(i, 1);
select();
}
});
function select() {
indices.sort(function(a,b){return a-b});
var start = indices[0];
var end = indices[indices.length - 1];
$('#selectable li').removeClass('ui-selecting');
$('#selectable li').filter(function() {
return $(this).index() >= start && $(this).index() <= end;
}).addClass('ui-selecting');
}
I put up a demo for this solution: http://jsfiddle.net/snyuan/TGekT/, and http://jsfiddle.net/snyuan/Yrgnv/. Just a reference.
精彩评论