To sort items in a list you will need
to start out with a list on your page and references to the jQuery
and jQuery-ui libraries. Place the references to the libraries in
the header section of your page.
<script
type='text/javascript'
src='/jquery/jquery-1.7.1.min.js'></script>
<script
type='text/javascript'
src="/jQuery/jquery-ui-1.8.18.custom.min.js"></script>
You will next need to include the
javascript to tell jQuery which class or elements to address. In the
example below we are telling jQuery to allow items that
use the class sortableList to be sorted.
<script
type="text/javascript">
$(function
() {
$(".sortableList").sortable({});
$(".sortableList").disableSelection();
});
</script>
Copy and paste the following code to a
text document, rename the extension to HTML and view it in a browser.
<!DOCTYPE
html>
<html
lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
type='text/javascript'
src='http://www.homeschooloffice.com/jquery/jquery-1.7.1.min.js'></script>
<script
type='text/javascript'
src="http://www.homeschooloffice.com/jQuery/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<script
type="text/javascript">
$(function
() {$(".sortable").sortable({});
$(".sortable").disableSelection();
});
</script>
<ul
class="sortable">
<li>Item
1</li><li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
While the example is quick and easy it
really doesn’t do much for us. If we wanted to store the changes
we would need to call back to our site and write the results to
storage. AJAX is how I normally do this. Here is an example:
$(function
() {
$(".sortable").sortable({start: function (e, ui) {
ui.placeholder.height(100);
},
update: function
(e, ui) {
var
item = ui.item;var position = (ui.item).index();
var section = item.attr("id");
var queue = container.attr("Qid");
$.ajax({
type:
"POST",contentType: "application/json",
url: "Default.aspx/SaveList",
data: "{ ItemData: " + JSON.stringify({ Seq: position + 1, ItemID: section, ListID: queue }) + " }",
dataType: "json",
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
},
success: function (feedback) {
}
});
}
});
$(".sortable").disableSelection();
Here
is the corresponding list:
<div
class="reorderList" style="width:90%;">
<ul id="List1" class="sortable" Qid="/wEFAjE5">
<ul id="List1" class="sortable" Qid="/wEFAjE5">
<li
id="/wEFAjYw">Item 1</li>
<li id="/wEFAjYx">Item 2</li>
<li id="/wEFAjYy">Item 3</li>
</ul>
<li id="/wEFAjYx">Item 2</li>
<li id="/wEFAjYy">Item 3</li>
</ul>
<ul
id="List2" class="sortable" Qid="/wEFAjE5">
<li
id="/wEFAjYa">Item 4</li>
<li id="/wEFAjYb">Item 5</li>
<li id="/wEFAjYc">Item 6</li>
</ul>
<li id="/wEFAjYb">Item 5</li>
<li id="/wEFAjYc">Item 6</li>
</ul>
</div>
I cover many of the details on AJAX in
my article
jQuery AJAX, but here I want to go over the variables we
are passing and where we store that information on the page.
var
item: This is the entry in the list
that we are moving from one point to another in the list(s).
var container: The source container for the list item to be moved.
var container: The source container for the list item to be moved.
var
position = The new position of the item in the list.
var
section = Id of the item being moved
var
queue = List of the container to where the item was moved.
So
with these variables, we can take an item from list 1, and move it to
list 2 and store the information for a later day. Notice that as
part of my data element I am passing the items back in an “object”.
The codebehind equivalent looks like this:
public
class
TaskSequence
{
public
int
Seq { get;
set;
}
public string ItemID { get; set; }
public string ListID { get; set; }
public string ItemID { get; set; }
public string ListID { get; set; }
}
This
essentially allows my users to organize their information into visually distinct lists.
No comments:
Post a Comment