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