jQuery Sortable and Dialog example
jQuery sortable is used when graphical sorting is necessary. This example shows you 2 line sorting using server side program. This is often used for software configuration.
- Access and work the example
- Included jQuery files
- Setup HTML
- Setup jQuery Sortable and Dialog
- Handling data
- Inner html of jQuery Dialog
- Testing automation
In order to access this example, please access the url below or "jQuery Sortable Control" link from the toppage.
Then the page below will appear.
This example has two lines of the list. You can sort freely these lists by drag and drop.
When you click an Item, the dialog appear and show which item is clicked.
This example uses sortable lists and jQuery dialog. This example pattern is often used in page layout of website application, just like blog and cms.
The source code is in "ALINOUS_HOME/samples/sortable/" folder.
In order to change the theme of jQuery, please take a look at jQuery Dialog. The way to do that is same.
At first, you have to prepare list to sort. The source code below is main part of the "index.html".
In this html, there are 2 lists and div tag to be the dialog.
- JQuery sortable
- JQuery dialog
- Click support
The sortable() is called and set the list tags, whose id are "sortable1" and "sortable2". And define the event handler function. The event handler calls $.ajax() and access "/samples/sortable/syncsorteddata.alns" with parameter to notify the sorted result.
The dialog() is called to make the div tag be the dialog. The inner html is made when the list item clicked.
The click event is made manually by program. The click event must not occur when you are dragging or dropping the item. So it defines "var sorting" variable and inhibit to continue click operation.
The start event of jQuery sortable inhibit the operation. The deactivate and update event allow it after 600 and 300 milliseconds from they happened.
The source code below is one of "/samples/sortable/syncsorteddata.alns", which is accessed when sort has finished.
This code does nothing, but by placing break point, we can know what parameter comes. This url is accessed twice, notify result for "sortable1" and "sortable2".
The source code is of inner dialog which is shown when user click any of the item.
This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery Sortable and Dialog.