CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
Cataclysm
Cataclysm

Reputation: 8568

JQuery-UI : How to define sortable td tags of a Table?

I am using JQuery-UI's Sortable to sort my table's td tags of each row as 

$(".scheduler").children('tbody')
    .children('tr').sortable({
    revert: true
});

but I found additional column has appeared. Here is JsFiddle Link. Can anyone give me suggestion ?

Additional question : Can I sort td tags of the whole table instead of each row ? (currently I can sort only td tags of same rows. I would like to drag one td and replace with another td tag of different rows)

Upvotes: 0

Views: 4477

Answers (2)

Rafael
Rafael

Reputation: 18522

Regarding the additional column, it is rendered, because when you start dragging an item, jQuery UI sortable adds a placeholder element to the row. You could workaround this behavior by using

helper: "clone"

The placeholder will still be added, but the original element to be dragged will get display: none and the helper will be positioned absolutely. Maybe, instead of using table, you could use a list… https://jqueryui.com/sortable/#display-grid

Regarding sorting the whole table, there is no simple way I can imagine using jQuery UI sortable. The best behavior I achieved so far is initializing using

$(".scheduler").sortable({
    items: "td"
});

but it will just move table cells from one row to the other causing more and more columns to be added to the table.

Upvotes: 3

alamnaryab
alamnaryab

Reputation: 1484

make you jquery code like this

$(".scheduler tr").sortable({
    revert: true
});

i tried this on jsfiddle and working for td sorting

Upvotes: 0

Related Questions