Created
February 4, 2015 12:59
-
-
Save tonicospinelli/01ff6c6d603f06966a36 to your computer and use it in GitHub Desktop.
combining jQueryUI + Selectable + Sortable
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>jQuery UI Sortable - Default functionality</title> | |
| <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css" /> | |
| <script src="http://code.jquery.com/jquery-1.7.js"></script> | |
| <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.js"></script> | |
| <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" /> | |
| <style> | |
| #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; } | |
| #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } | |
| #sortable li span { position: absolute; margin-left: -1.3em; } | |
| #sortable .ui-sortable-helper{list-style-type: none; margin: 0;margin-top: 20px; padding: 0;} | |
| #sortable .ui-sortable-helper li { margin-top: -20px; font-size: 1.4em;opacity: .8} | |
| </style> | |
| </head> | |
| <body> | |
| <ul id="sortable"> | |
| </ul> | |
| <script type="text/javascript"> | |
| $(function() { | |
| var staticElements = []; | |
| var item = 0; | |
| while(item <= 10){ | |
| $('#sortable').append('<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item '+item+'</li>'); | |
| if(item % 3 === 0){ | |
| $('#sortable').children().last() | |
| .addClass('ui-state-disabled'); | |
| } | |
| item++; | |
| } | |
| $("#sortable") | |
| .selectable({ | |
| filter : 'li:not(.ui-state-disabled)', | |
| cancel : 'li.ui-selected', | |
| selected: function( event, ui ) { | |
| $(ui.selected).removeClass('ui-state-hover').addClass('ui-state-active'); | |
| }, | |
| selecting: function( event, ui ) { | |
| $(ui.selecting).addClass('ui-state-hover'); | |
| }, | |
| unselected: function( event, ui ) { | |
| $(ui.unselected).removeClass('ui-state-active'); | |
| } | |
| }) | |
| .sortable({ | |
| placeholder: 'ui-sortable-placeholder ui-state-highlight', | |
| revert: true, | |
| cancel: ".ui-state-disabled", | |
| create: function(event, ui) { | |
| var cancelClass = $(this).sortable('option', 'cancel'); | |
| $(this).find(cancelClass).each(function() { | |
| var self = $(this); | |
| staticElements.push({index: self.index(), item : self.clone()}); | |
| }); | |
| }, | |
| start: function(event, ui){ | |
| //create a new list to group all selected elements | |
| var groupedList = $(document.createElement(this.nodeName)) | |
| .addClass('ui-sortable-helper').width($(this).width()); | |
| $(this) | |
| .children('.ui-selected') | |
| .not(ui.placeholder) | |
| .each(function(index){ | |
| //clone the selected elements in sortable list and append at new list | |
| $(this).clone().removeAttr('style').appendTo(groupedList); | |
| //don't remove the current draggable item, is very important to | |
| if(ui.helper[0] != this){ | |
| $(ui.placeholder).clone().insertBefore(this); | |
| $(this).remove(); | |
| } | |
| else{ | |
| $(ui.helper[0]).css({ | |
| 'height': $(this).height(), | |
| 'border': '1px dotted #999' | |
| }); | |
| } | |
| }); | |
| //clear content and append new groupList | |
| $(ui.helper).html('').removeAttr('class').append(groupedList); | |
| //refresh sortable list with new indexes | |
| $(this).sortable('refresh'); | |
| }, | |
| change:function(event, ui) { | |
| var self = this; | |
| var places = $('.ui-sortable-placeholder').not(ui.placeholder); | |
| if (places.length) { | |
| places.insertAfter(ui.placeholder); | |
| } | |
| reorderStaticElements(self); | |
| }, | |
| stop: function(event, ui){ | |
| //get the sortable element | |
| var self = $(this); | |
| //get the list in dragged element | |
| var groupedList = $(ui.item).children(); | |
| //deselect if all items are selected | |
| if ($(this).children().length == 1) { | |
| groupedList.children() | |
| .removeClass('ui-state-active ui-selected', 1000); | |
| } | |
| //insert list node before droped element | |
| groupedList.children().removeAttr('style').insertBefore(ui.item); | |
| //remove dropped element in sortable list | |
| ui.item.remove(); | |
| //remove extras placeholders in sortable list | |
| self.find('.ui-sortable-placeholder').remove(); | |
| reorderStaticElements(this); | |
| } | |
| }); | |
| function reorderStaticElements(sortable, inChange){ | |
| sortable = $(sortable); | |
| sortable.find(sortable.sortable('option','cancel')).remove(); | |
| var length = sortable.children().length; | |
| var helperIndex = sortable.find('.ui-sortable-helper').index(); | |
| for (var idx in staticElements) { | |
| var obj = staticElements[idx]; | |
| var fixed = obj.item; | |
| var index = obj.index; | |
| if (index === 0) { | |
| sortable.prepend(fixed); | |
| } | |
| else if (helperIndex < 0 && index >= length) { | |
| sortable.append(fixed); | |
| } | |
| else if (helperIndex >= 0 && helperIndex >= index) { | |
| helperIndex++; | |
| sortable.children().eq(index).before(fixed); | |
| } | |
| else if (helperIndex >= 0 && helperIndex <= index) { | |
| sortable.children().eq(index).after(fixed); | |
| } | |
| else { | |
| sortable.children().eq(index).before(fixed); | |
| } | |
| length++; | |
| } | |
| //refresh sortable list with new indexes | |
| sortable.sortable('refresh'); | |
| sortable.selectable('refresh'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment