Manual Sorting with ListView by Using Drag and Drop
Introduction
I have been following Matt’s jQuery related posts, and trying to get myself familiar with this new library. While searching for tutorials about it, I accidentally found this great blog. Accident followed by another accident, I figured out that one of their JavaScript posts can be applicable to the ListView control in order to create a “drag and drop” based manual sorting within the items of the ListView.
• I strongly suggest reading the original post first before passing to the rest of this post.
Implementing The Original Post…
As a data source, I just grabbed the XML file that I used before in here, and simplified it.
Here is the CSS implementation of the original post into my sample ASPX page:
And then, I created the DIVs programmatically by using a ListView as in the following:
If you look at the JavaScript.js file that I used in my sample code, you will see that the load function has been commented since I needed to create the “dragObject” objects dynamically in that function:
As a result of this, I organized the Page_Load event as:
Download
You can download the sample application via here.
