Web Development with jQuery®

Summary (^) ❘ 359

Summary

In this chapter, you learned how to make sortable lists with the jQuery UI Sortable plugin. Using

the Sortable plugin, you can offer a drag-and-drop sorting API effortlessly. jQuery UI provides a

plethora of options that you can use for fi ne-grained control.

You learned how to use options such as placeholder, cursor, and opacity to control the look and

feel of a sortable list. The placeholder option takes a class name, which enables you to use CSS to

customize the look of the space that’s reserved for a sortable element as sorting is taking place. And

you saw how the opacity and cursor options both take the same values of the CSS opacity and

cursor properties.

You saw how multiple lists can be connected to each other using the connectWith option, which you

provide with a selector that indicates which list you want that sortable list to exchange items with.

The connectWith option creates a one-way link to another list, which means that you can drag items

only to the other list, but not back to the original. To create a two-way link, you can also add the

connectWith option to the other list, with a selector that references the fi rst list.

You’ve also learned how to save the state of sorted lists, which is also done with the sortable()

method. In the fi rst argument, you provide the string 'serialize'. Then in the second argument,

you can provide options that determine how serialization works. For example, you provide the

attribute option if you want to get the value of any attribute other than the id attribute. Another

option you can use is the expression option, which takes a JavaScript regular expression as its value.

Then, the key option is used to name the data that’s serialized.

You also learned how the update option can be provided to sortable lists, which takes a callback

function that executes after a sort is completed.

EXERCISES

1. What method do you use to make a list sortable?


2. What kind of value do you provide to the placeholder option?


3. What is the purpose of the placeholder option?


4. If you want to change the cursor displayed as a sort is taking place, which option would

you use?

5. What is the purpose of the helper option?


6. Which option do you use to connect multiple sortable lists to one another?


7. What kind of value do you provide to the connectWith option?


8. How do you save the state of a sortable list after every sort takes place?

http://www.it-ebooks.info