jQuery UI

Chapter 12. Permutation of Elements in the Page

Moving items to insert them elsewhere in the page has become indispensable in current web applications. Users move elements visually by dragging with the mouse, and the system automatically inserts the moved items. Here, everything is handled internally by jQuery UI, which provides us the mechanism that implements this functionality.

Here we call this operation a permutation, because the moved element leaves its place, while the destination (the location where the element is deposited) expands to allow the insertion of the new element.

Basic Principles of Permutation of Elements

Suppose we want to write the HTML code to display a paragraph being moved, as shown in Figure 12-1. Here, we have five paragraphs. The first is selected using the mouse and is moved from the list and inserted into a new location.

With jQuery UI, swappable elements must be inserted into a parent element (<div> or other). All elements in the descendants of this parent are permutable with each other.

To specify that these elements are permutable with the mouse in the HTML page, the jQuery UI sortable () method manages the encompassing <div> in the <script>:

<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 /> <div id=div1> <p> Paragraph 1 </p> <p> Paragraph 2 </p> <p> Paragraph 3 </p> <p> Paragraph 4 </p> <p> Paragraph 5 </p> ...