Above all, we should remember that the tag categories in
table "section" is ordered by the field "order," which greatly
facilitates the later tag tidying which possibly requires adjusting the orders
of the tag categories. In this case, we naturally realized the Sortable object supplied by the script.aculo.us framework,
which provided the easy drag & drop manipulation to change the tag list
order. Of course, the first step for this is still to get this operation
related data ready.
In the previous section in Part 1, we leveraged the storage
process "MoveSection" to encapsulate the moving tag category related
operations. So, in the behind-code file, what is left for us to do is only invoke
the storage process "MoveSection," which is done inside page
MoveSection.aspx).
Listing 4
public partial class MoveSection : System.Web.UI.Page
{
protected void Page_Load(object sender,
EventArgs e)
{
if ((Request.Params["oid"] != null) &&
(Request.Params["noid"] != null))
{
//prepare for the input arguments for the
storage process: the old 'order' and the new one
int iOrder = Convert.ToInt32(Request.Params["oid"]);
int iNewOrder = Convert.ToInt32(Request.Params["noid"]);
//set up reference to the database
Database db =
DatabaseFactory.CreateDatabase("DatabaseConnectionString");
//define the SP 'MoveSection' object
string sqlCommand = "MoveSection";
DbCommand dbCommand = db.GetStoredProcCommand(sqlCommand);
//add the input arguments for the SP
db.AddInParameter(dbCommand, "order", DbType.Int32, iOrder);
db.AddInParameter(dbCommand, "new_order", DbType.Int32, iNewOrder);
//execute the SP
db.ExecuteNonQuery(dbCommand);
}
}
}
Note to access page MoveSection.aspx, you have to provide
two arguments, oid and noid, which
represents the order before and after moving the tag category, respectively.
Now, let us focus on how to achieve the result of mouse
dragging the tag category list items. In fact, this is easily done using the "Sortable.create"
method. The key task in this case lies in how to invoke page MoveSection.aspx
after the dragging action so as to execute the backend related database
operations. Examining further, you will find this is accomplished with the help
of the callback function of the "Sortable.create" method.
Listing 5
var sort = Sortable.create("section_list", {
//ghosting: true,
constraint: false,
starteffect: function(element) {
// mark the initial order before dragging
start_order = Element.FindIndexOf("section_list", element);
start_order = parseInt(start_order) + 1;
},
endeffect: function(element) {
// mark the result order after dragging
end_order = Element.FindIndexOf("section_list", element);
end_order = parseInt(end_order) + 1;
// invoke the page MoveSection.aspx in the Ajax mode
// to move the tag section
var pars = "oid=" + start_order + "&noid=" + end_order;
new Ajax.Request("MoveSection.aspx",
{mothed: "GET", parameters: pars});
}
As you have found out, it is in the options
parameter of the "Sortable.create" method that we defined the
callback function endeffect, where we used the Ajax.Request
class to asynchronously call page MoveSection.aspx.
Another question is how to obtain the two arguments oid and noid that page
MoveSection.aspx needs. Since the parameters passed to the two callback
functions starteffect and endeffect are both the dragged page elements, we need
to retrieve the position of the element inside the div object that represents
the tag category list.
In general JavaScript programming, to retrieve a sub element
within a parent use the simple looping mode. Now with the help of the extending
method FindIndexOf of the Element
object, you can more elegantly do this, as is shown above.
Figure 2 - Moving the tag categories related
snapshot