jquery-ui-sortable

问题 I have a <ul> list that I want to make sortable (drag & drop). How can I get it to work with Bootstrap 3 in modern browsers and touch devices? I'm trying to use jqueryui-sortable combined with http://touchpunch.furf.com/; it seems to work, but it's hacky and jQueryUI doesn't play nice with Bootstrap. How can I avoid Bootstrap/jQueryUI conflicts while adding touch-screen support? 回答1: The answers posted before this one are surprisingly outdated. rubaxa-sortable is a fast, no-dependencies,

问题 How do I get the jQuery-UI sortable feature working on iPad and other touch devices? http://jqueryui.com/demos/sortable/ I tried to using event.preventDefault(); , event.cancelBubble=true; , and event.stopPropagation(); with the touchmove and the scroll events, but the result was that the page does not scroll any longer. Any ideas? 回答1: Found a solution (only tested with iPad until now!)! http://touchpunch.furf.com/content.php?/sortable/default-functionality 回答2: To make sortable work on

问题 I have a list of elements that can be dropped into a list of (existing) sortables. When a droppable element is dropped into the sortables, I want to modify the element. I do this by calling the drop event of droppable. But it seems this drop event is also fired when the sortable elements are sorted inside sortable. And I only want to modify the dropped element when dropped-in from the outside. $('#sortable').sortable().droppable({ // Drop should only fire when a draggable element is dropped

问题 Is there a way to have nested jQuery sortables? As in nested containers, not in the sense of a nested list. <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container"> <div class="item"></div> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="item"></div> </div> $('.container').sortable({ connectWith: '.container' }); http://jsfiddle.net/ExLqv/2/ That

问题 I have: <ul id="sortableList"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> I have wired into the update: function(event, ui) { } but am not sure how to get the original and new position of the element. If i move item 3 to be above item 1, I want the original position to be 2 (0 based index) and the new position of item 3 to be 0 . 回答1: $('#sortable').sortable({ start: function(e, ui) { // creates a temporary attribute on the element with the old index $(this).attr('data-previndex',

问题 I currently have a jQuery sortable list working perfectly. I am able to move the 'li' elements around. However, how can I make a button to move a specific 'li' element up by one and the one above to move down (and of course the opposite for a down button)? I have looked around google and found very little. Even a link would be fantastic! Thanks! 回答1: If you have following html code: <button id="myButtonUp">myButtonTextForUp</button> <button id="myButtonDown">myButtonTextForDown</button> <ul>

问题 Report designer contains Bootstrap 3 panels. Panels contain divs. I tried to make Group 1 and 2 header panels (having class panel-sortable ) sortable using $(".panel-sortable").sortable().disableSelection(); Panel order cannot changed. After dragging Group 2 header to Group 1 header to change their order panel old order is restored. How to make header1 and 2 panels sortable so that their order can changed ? Report can contains many headers. If there is some other way to make them sortable,

问题 I'd like to (via a keyboard operator) select multiple items in an unordered list and drag them to another point in the same list with jQuery Sortable. 回答1: Select items to sort Create a custom helper Hide the selected items until sort is done Resize the placeholder according to the selection Manually detach selected items from the current position and attach them to the new position after sort Show the hidden items ( undo step 3 ) after step5 Here's how I did ( Modifying my answer for this

问题 Im trying to develop a small page that has the following functionality: Page will have two divs: one being #origin, containing a lot of thumbnail images, and the second one will be #drop, where the images can be dropped on (up to 3 only). it needs to be possible to drag-drop the images from #drop back to origin. #drop needs to be sortable, since the order of the 3 selected images matter. When dropped on #drop, the images should align, as if they had original been displayed like that from the

问题 I'm using jQuery and Sortable to arrange my list of items (and this http://dragsort.codeplex.com). All works perfect. I'm using a function on dragEnd to arrange the lists in order. Here is my code: $("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" }); function saveOrder() { var data = $("#list1 li").map(function() { return $(this).children().html(); }).get(); $("input[name=list1SortOrder]"