Get a free trial // Grow your CSS skills // Land your dream job

Drop table rows on other table rows AND allow re-ordering? (jQuery UI sortable/draggable/droppable?)

  • # December 15, 2012 at 4:59 am

    I’m out of ideas.

    I have a list of table rows that i need to sort. No problem, jQuery UI’s `sortable()` will do that for me. The thing is, i need to be able to drop the dragged element on top of other rows as well. If a row is dropped on top of another row the dragged row should disappear (i’d make som ajax stuff under the hood).

    Take a look at this demo:

    That’s exactly what i want, except i also want to be able to drop the dragged element on other rows.

    I don’t have to use jQuery UI if there are better alternatives, i just stuck with it because it already kind of does what i need.

    This is pretty much what i’ve got:

    I’ve played around with `draggable()` and `droppable()` but haven’t gotten the result i’m looking for.

    Any suggestions?


    I made some progress. I managed to combine `sortable` with `droppable`, but i’m not quite done yet. It doesn’t work as i need it to.

    Check this jsfiddle out:

    If you want to drop a row between two other rows, it still thinks you are dropping it ON another row, thus causing it to disappear. I still want to be able to re-order the rows by dropping them on the gap between. Tried playing around with the `tolerance` option, but it made no difference for me.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed