$(“selector”).trigger(“sortupdate”); you will have to maybe pass in as second argument a function where to put in the event and the ui, event is not as important as ui the inside code of the sortable widget for event triggering looks like this this._trigger(“update”, event, this._uiHash(this)); So you may want to do following function triggerUpdateFor(selector) { … Read more
The answers posted before this one are surprisingly outdated. rubaxa-sortable is a fast, no-dependencies, small reorderable lists widget with touch support that works with the HTML5 native drag&drop API. You can use it with Bootstrap, Foundation, or any CSS library you want, and instantiating it only takes one line. It supports reordering within a list … Read more
$(‘#sortable’).sortable({ start: function(e, ui) { // creates a temporary attribute on the element with the old index $(this).attr(‘data-previndex’, ui.item.index()); }, update: function(e, ui) { // gets the new and old index then removes the temporary attribute var newIndex = ui.item.index(); var oldIndex = $(this).attr(‘data-previndex’); $(this).removeAttr(‘data-previndex’); } });
Looking at the source for ui.sortable.js (1.7.2), you can cheat and set the placeholder to an object with a element function and an update function. The element function is used to return the placeholder dom object and the update function allows you to do things like correct its size (you can check out the _createPlaceholder … Read more
If you want to prevent browser sniffing, the CSS only solution is to set the ul or a container style to overflow: auto. If you look at the source through firebug, it’s the way jQuery does it in their example.
$(“#sortable1”).sortable({ connectWith: “.connectedSortable”, forcePlaceholderSize: false, helper: function (e, li) { copyHelper = li.clone().insertAfter(li); return li.clone(); }, stop: function () { copyHelper && copyHelper.remove(); } }); $(“.connectedSortable”).sortable({ receive: function (e, ui) { copyHelper = null; } });
UPDATED: 26/08/2016 to use the latest jquery and jquery ui version plus bootstrap to style it. demo: http://so.lucafilosofi.com/jquery-sortable-change-event-element-position/ $(function() { $(‘#sortable’).sortable({ start: function(event, ui) { var start_pos = ui.item.index(); ui.item.data(‘start_pos’, start_pos); }, change: function(event, ui) { var start_pos = ui.item.data(‘start_pos’); var index = ui.placeholder.index(); if (start_pos < index) { $(‘#sortable li:nth-child(‘ + index + ‘)’).addClass(‘highlights’); … Read more
Angular UI has a sortable directive,Click Here for Demo Code located at ui-sortable, usage: <ul ui-sortable ng-model=”items” ui-sortable-update=”sorted”> <li ng-repeat=”item in items track by $index” id=”{{$index}}”>{{ item }}</li> </ul> $scope.sorted = (event, ui) => { console.log(ui.item[0].getAttribute(‘id’)) }
Take a look here: Creating and Using Sort Descriptors You can compare as case-insensitive. NSSortDescriptor *sorter = [[[NSSortDescriptor alloc] initWithKey:@”w” ascending:YES selector:@selector(localizedCaseInsensitiveCompare:)] autorelease]; NSArray *sortDescriptors = [NSArray arrayWithObject: sorter]; [mGlossaryArray sortUsingDescriptors:sortDescriptors];
The option handle of the plugin allows you to define that is the element that can initiate the sort. You can provide a selector or an element. If you have this html, with the .handler to be the handle to start the sort: <ul class=”sortable”> <li> <span class=”handle”></span> My element </li> </ul> Apply the option … Read more