EzDevInfo.com

jQuery UI Sortable Position

How do I track what position an element is when its position in a sortable list changes?

jQuery Sortable Move UP/DOWN Button

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!

jquery Sortable connectWith calls the update method twice

In the code below the update function gets called twice when an item is moved from list sortable1 to sortable2. Though I need to call that function only once:

$("#sortable1 tbody, #sortable2 tbody").sortable({
    connectWith: '.connectedSortable tbody',
    helper: fixHelper,
    handle : '.handle',
    update : function () {
        var order = $('#sortable1 tbody').sortable('serialize');
    }    
}).disableSelection();

jquery-ui sortable | How to get it work on iPad/touchdevices?

How do I get the jquery-ui sortable feature working on iPad and other touch platforms? http://jqueryui.com/demos/sortable/

I tried to work with

event.preventDefault();
event.cancelBubble=true;
event.stopPropagation();

for the touchmove and the scroll event, but the only result was - as expected - that the page does not scroll any longer.

Any ideas? THX! EH!

(jQuery UI Sortable) Which class while dragging?

As you know, on jQuery UI Dragable Interaction, while some objects dragging, getting .ui-draggable-dragging class. Is there anything like this for sorting?

Example here. I want to change object's background-color which dragging. Which class adding this objects while dragging? .ui-sortable-dragging?

I want to sort an array using NSSortDescriptor

I am having a problem regarding sorting an array w.r.t database:

NSSortDescriptor *sorter = [[NSSortDescriptor alloc] initWithKey:@"w" ascending:YES];
NSArray *sortDescriptors = [NSArray arrayWithObject: sorter]; 

[mGlossaryArray sortUsingDescriptors:sortDescriptors]; 
[sorter release];

Here in database there are some first capital letters and because of that capital letter it does not show me proper sorted output. Here i am sorting an array with r.t "w" which is my table column in database. Here I have attach the screen shot for the output, which says that "Cancer" comes first than "c", but this is not correct, it is not giving alphabetically sort because of the capitalized words.

eg. if there is "able" in lower case and "aCid" then it will show aCid first and then able, and there is also a case where if the 1st letter is caps it comes first eg, "Able" and "a". Here Able displays first.

jQuery Sortable and Droppable

I want to have a list that is sortable, but I also want the elements in that list to be droppable to the divs I have defined as droppable. I can't seem to find a way to do it. Any ideas?

jQuery sortable obtain 2 elements being swapped

I cannot find out how to obtain destination element with jQuery UI sortable.

    $("#pages").sortable({
        opacity: 0.6,
        update: function(event, ui) {
            var first = ui.item; // First element to swap
            var second = ???? // Second element to swap
            swapOnServer(first, second);
        }
    });

All the options I've tried point to the element being dragged, but not the one it is swapped with: ui.item[0], event.srcElement, event.toElement.

Additionally, this points to the LIST (OL) element.

Saying second I mean following:

Original order is:

| 0 | 1 | 2 | 3 |

We drag element 1 and drop it in position 3. Which will end up with:

| 0 | 3 | 2 | 1 |

So the first element is 1 and the second is 3 (WRONG! See below).

UPDATE: I have realised that I got it wrong. The new order in this case will be.

| 0 | 2 | 3 | 1 |

As a result my question does not really makes sense. Thanks everybody for the help. I'll mark vote and mark an answer.

So the question is how to obtain the second element here?

THE CURRENT WORKAROUND (as there is no term as swapping in sortable) is below. It uses temporary array with orders.

    var prevPagesOrder = [];
    $("#pages").sortable({
        start: function(event, ui) {
            prevPagesOrder = $(this).sortable('toArray');
        },
        update: function(event, ui) {
            var currentOrder = $(this).sortable('toArray');
            var first = ui.item[0].id;
            var second = currentOrder[prevPagesOrder.indexOf(first)];
            swapOnServer(first, second);
        }
    });

Thanks,
Dmitriy.

Jquery ui-sortable - unable to drop tr in empty tbody

I have two connected tbody elements allowing me to drag rows between two tables. Everything works fine until all rows are removed from either table.

When all rows have been dragged to the other table the tbody height decreases making it (near)impossible to drop rows back inside.

Is there a known workaround for this problem? (min-height doesn't work on a tbody element)

Many thanks in advance.

jQuery UI Draggable/Sortable - Get reference to new item

I am using the jQuery UI Draggable/Sortable demo (http://jqueryui.com/demos/draggable/#sortable) for the basis of my project. I need to get a reference to the <li> that gets cloned into the sortable when the sortable receives it. I tried the sortable's receive event, but that only gives a reference to the original draggable <li>, and not its clone.

jQuery UI: sortable('toArray') returns an empty array

This has me stumped. The follow code returns ",,,,,,":

<script type="text/javascript">
$(function() {
	$('#listB').sortable({
		connectWith: '#listA',
		update: function(event, ui) {
			var result = $(this).sortable('toArray');
			alert(result);
			}
	});
	$('#listA').sortable({
		connectWith: '#listB'
	});
});
</script>

<div id="boxA">
	<ul id="listA" class="myList">
		<li value="1">Item A</li>
		<li value="2">Item B</li>
		<li value="3">Item C</li>
		<li value="4">Item D</li>
		<li value="5">Item E</li>
		<li value="6">Item F</li>
		<li value="7">Item G</li>
	</ul>
</div>

<div id="boxB">
	<ul id="listB" class="myList">
		<li value="1">Item A</li>
		<li value="2">Item B</li>
		<li value="3">Item C</li>
		<li value="4">Item D</li>
		<li value="5">Item E</li>
		<li value="6">Item F</li>
		<li value="7">Item G</li>
	</ul>
</div>

Why?! It's driving me insane! Any suggestions?

If I do "jquery sortable" on a contenteditable item(s), I then can't focus mouse anywhere inside contenteditable text anymore

Strangely this is broken only in Firefox and Opera (IE, Chrome and Safari works as it should).

Any suggestions for a quick fix?

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){
      $('#sortable').sortable();
  });
  </script>
</head>
<body>
  <span id="sortable">
    <p contenteditable="true">One apple</p>
    <p>Two pears</p>
    <p>Three oranges</p>
  </span>
</body>
</html>

jQuery Sortable List - scroll bar jumps up when sorting

I created a demo: http://pastebin.me/584b9a86d715c9ba85b7bebf0375e237

When the scroll bar is at the bottom and you drag items to sort them, it causes the scroll bar to jump up. It seems to do this in FF, Safari, Chrome, and IE (at least IE8).

In Firefox on my Mac, it does the jump up when the scroll bar is at the bottom, but also adds a nice flash to the whole list. It just flashes the whole list right as it scrolls it up. I believe that if I figure out what is causing the scroll up (and if I can stop it), the flashing will stop as well.

I don't like it jumping up like that b/c I find it jarring and confusing. I know this is a bit of a corner case, but I'd like to fix it if I could.

So, is there any way to prevent it from scrolling up? Alternately, what is causing it to scroll up?

Thanks

Controlling Placeholder Height with jQuery-UI Sortable

I'm using the jQuery-UI sortable component to drag table rows. Because of my requirements, I'm creating a helper element to hold multiple rows during the drag.

I seem to have this working, but the empty space inserted at the current drag position is only tall enough for a single row. Can anyone see why the placeholder isn't as tall as the content I'm dragging?

I tried setting style="height:auto" in the parent element being dragged but this has no effect.

I've posted my code on jsFiddle at http://jsfiddle.net/jCNcv/. If you try dragging the top item down, you can see that the empty placeholder under the drag position is only tall enough for a single row.

jQuery Sortable with animation

Hi 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]").val(data.join("|"));
};

My question: Is there anyway that I can do an animation while I'm dragging? Or reposition the elements while dragging? I just need it to work on Safari.

One example is this:

http://www.youtube.com/watch?v=U3j7mM_JBNw

Look at the drag/drop (0:30) and you'll see what I'm talking about.

Thanks.