O'Reilly logo

jQuery UI by Eric Sarrion

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required