CODEWITHSUNDEEP
javascriptjqueryjquery-ui
reagan
reagan

Reputation: 653

How do you detect changes in the DOM with jQuery UI Sortable?

I have an nodejs express-based + mongodb website that I'd love to use with this library. What I would like to know is how would I detect changes in the order of elements in order to save their state. Submission of a form? jQuery functions?

Example: I have a list of paragraphs that should appear on my about.html page. In my CMS I want to change their order. I go to the page that would let me sort the paragraphs, change their order, et cetera, and then click the save button. What needs to happen when I save?

I would love to hear any strategies or see any specific examples.

Upvotes: 0

Views: 560

Answers (1)

Joe
Joe

Reputation: 15528

Here's starting point for you: http://jsfiddle.net/XsUCv/

The JS is:

$("#sortable").sortable();
$("#sortable").disableSelection();

$('input').on('click', function () {
    var sortedIDs = $("#sortable").sortable("serialize");
    alert(sortedIDs);
});

You'd then need to store the serialized order. When the page is next loaded the order should be fetched from the db and the <li>s printed in the order they were saved in.

Upvotes: 1

Related Questions