Here, I will show you a simple example of rearranging the HTML list item through drag and drop functionality using jQuery. Here in this example, I have used the jQuery List DragSort plugin . You can download this plugin from here.
To implement this we need to write the code like as shown below
-
In the above code, you can see that I have script blog for making the list item dragable after the html list. If you use the script block on head of the page then it will not work.
Output-
To implement this we need to write the code like as shown below
-
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="Default.aspx.cs"
Inherits="ListDragSortDemo._Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js"
type="text/javascript"></script>
<script src="Scripts/jquery.dragsort-0.5.1.min.js"
type="text/javascript"></script>
<style type="text/css">
#demolist
{
width: 350px;
list-style-type: none;
margin: 0px;
}
#demolist li
{
float: left;
padding: 5px;
width: 100px;
height: 100px;
}
#demolist div
{
width: 90px;
height: 50px;
border: solid 1px black;
background-color: #E0E0E0;
text-align: center;
padding-top: 40px;
}
.placeHolder div
{
background-color: white
!important;
border: dashed 1px gray !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ul id="demolist">
<li><div>Item1</div></li>
<li><div>Item2</div></li>
<li><div>Item3</div></li>
<li><div>Item4</div></li>
<li><div>Item5</div></li>
<li><div>Item6</div></li>
</ul>
<script type="text/javascript">
//to make the list dragable
$("#demolist").dragsort(
{
dragSelector: "div",
dragBetween: false,
dragEnd: saveOrder,
placeHolderTemplate: "<li
class='placeHolder'><div></div></li>"
});
//to save the draged item into list
function saveOrder() {
var data = $("#demolist
li").map(function () { return $(this).children().html();
}).get();
//$("input[name=list1SortOrder]").val(data.join("|"));
};
</script>
</form>
</body>
</html>
In the above code, you can see that I have script blog for making the list item dragable after the html list. If you use the script block on head of the page then it will not work.
Output-
 |
| Drag and Drop in HTML list |
No comments:
Post a Comment