From jQuery JavaScript Library

Contents 1 Various 2 Doesn't work on table rows 3 Dependencies 4 Links inside of draggable "box" 4.1 Solution 5 Adding elements to a sortable 6 containment: "parent" bug in ff 7 Very difficult to use

Various

As [this page] has been erased, i took its content from Google cache

Sorry; i confused Interface and UI which are not the same : deleting the content

---

The demo on this page isn't working in IE7...you can sort once, but then the object that you sorted no longer works.

What gives?
--Taumeson 19:38, 17 September 2007 (PDT)

Also, the main demo page works, but it obviously uses a different subset of scripts than does this main page.
--Taumeson 21:07, 17 September 2007 (PDT)

---

I use Mac Firefox and am also experiencing the above - only able to move a list item once and then JS erros. I see the following (never ending) error in my Firebug console:

self.pos has no properties [Break on this error] position: { left: self.pos[0], top: self.pos[1] }, ui.sortable.js (line 91)

this.parentNode has no properties [Break on this error] this.parentNode.removeChild( this ); jquery.js (line 1075)

this.parentNode has no properties [Break on this error] null jquery.js (line 1075)

I get similar errors when using this sort method with my own list items and downloaded ui components. I am running the most recent version of jQ and ui components.

--Krunkosaurus 14:14, 19 September 2007 (PDT)

Doesn't work on table rows

The docs should probably say that you can't make table rows sortable.

-- Edd 2007-11-12

Dependencies

The article only lists jquery.dimensions.js and ui.mouse.js as dependencies. However, i also have to load ui.sortable.js, ui.draggable.js and ui.droppable.js to make the demoes work. Is this simply outdated information (that i can change) or is it intended? Husky 12:09, 14 March 2008 (PDT)

Links inside of draggable "box"

How do you handle links within a draggable box? When I click on a link it thinks that I want to move the box, not trigger the link.

Solution

The solution is fairly simple; require the user to drag for a few pixels before registering the drag by passing the `distance` argument. I often use a value of 5. Simple clicks will now be passed through to elements within the draggable object.

GothAlice 23:52, 27 August 2008 (PDT)

Adding elements to a sortable

I did not figure out how to edit the article, so I add this here:

The doc for sortable("refresh") should really state that this re-initializes all elements inside the container to be sortable. This can be used after adding new elements to make them sortable.

I was hunting for that information quite a while, and was led on the wrong track by postings about a method AddToSortable() that seems not to exist...

Dbu 11:37, 5 June 2008 (PDT)

containment: "parent" bug in ff

I've noticed a bug in sortable - if I limit the area of elements' move using containment: "parent", option, then, in ff 2 and 3, i can't replace neither 1st nor last element of the sortable list with another from between them. i can move them to different position but only by holding them, not by putting anything in their place. there is no problem in other browsers

Very difficult to use

I find this plugin very difficult to use. Sure, the demo is very straight-forward, but for some reason, to make this work properly, I had to (like the demo) set a fixed width for the list items, which a lot of time is not something you'd want to do. When using a width in percents, strange things start to happen. Also, I had to give up the idea of letting "containment" be "parent", as it seems impossible to make that work. Also offset problems between the mouse and the list item being moved occur almost all the time.

Overall, this plugin is extremely user-unfriendly and doesn't feel stable at all. Skorpan 08:59, 31 July 2008 (PDT)

It seems that I managed to fix all the problems by some CSS:

.ui-sortable { display: block; }

Good luck to the rest of you. This took me a few hours... Skorpan 11:46, 31 July 2008 (PDT)

And oh yeah, if you find that the top- or bottom-most items cannot be sorted "over", add this:

.ui-sortable { padding: 2px; }

This makes some space so that list items can actually be dragged "over" the top- and bottom-most list items. I haven't tried this for horizontal sorting, but I'm guessing this should work. Skorpan 14:41, 31 July 2008 (PDT)