Entire Site
Free Trial
Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
Examples of Using the Permutation Mechan... > Displaying the Order in Which Events...
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.
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,....