Formatting Content

The sortable () method allows users to move the item selected by the mouse, and adds new CSS classes to the item being moved.

In Figure 12-2, for example, the sortable () instruction changes the HTML and we start moving the first paragraph (this code was recovered by Firebug).

HTML generated by the sortable () method

Figure 12-2. HTML generated by the sortable () method

The encompassing <div> element is assigned the ui-sortable CSS class, while the paragraph being moved is assigned the ui-sortable-helper class. Notice that jQuery UI created a <div> (ui-sortable-placeholder class) corresponding to the place left vacant when the paragraph was moved. This <div> moves progressively and will be removed from the page when the mouse button is released.

We can use CSS classes to customize the display. For example, if we change the ui-sortable-helper CSS class associated with the element that moves, we get a new look for the item being moved.

Modify these elements in the HTML by adding a <style> tag so that the paragraph being moved is displayed in red, becoming black at the end of displacement (see Figure 12-3):

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<style type=text/css>
  p.ui-sortable-helper {
    color : red;
  }
</style> <div id=div1> <p> Paragraph 1 </p> <p> Paragraph ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.