Examples of Using the Permutation Mechanism

Here are some examples of using the permutation mechanism.

Displaying the Order in Which Events Appear

Items can be moved between two lists or within a single list. First, we’ll create a script that allows users to move items within a list, then we’ll create a script that allows movement between lists.

When swapping in one list

The goal in this example is to display the order of the events described above, for a single list of items. For this, we display five swappable paragraphs and a <span> element containing the name of events. A line break is added after each stop event:

<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 2 </p> <p> Paragraph 3 </p> <p> Paragraph 4 </p> <p> Paragraph 5 </p> </div> <hr /> <span id=result></span> <script> $("#div1").sortable ({ revert : 1000, start : function (event, ui) { $("span#result").html ($("span#result").html () + "<b>start</b>"); }, stop : function (event, ui) { $("span#result").html ($("span#result").html () + ", stop <br />"); }, sort : function (event, ui) { $("span#result").html ($("span#result").html () + ", sort"); }, change : function (event, ui) { $("span#result").html ($("span#result").html () + ", change"); }, beforeStop : function ...

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.