As with the tag category, the orders of the tags within a
special category are also in some sequence. In this case, we display all the
tags according to the order field defined in table note. In this section, we are to add the mouse drag &
drop functionality to the tag list, so that users can use a simpler and more
intuitive mode to adjust the order of the tag info.
In this sample, we use page MoteNote.aspx to achieve the
moving tag function on the server side.
Listing 10
protected void Page_Load(object sender,
EventArgs e)
{
if ((Request.Params["id"] != null) &&
(Request.Params["noid"] != null))
{
// tag id
int iNoteId = Convert.ToInt32(Request.Params["id"]);
//tag order
int iNewOrderId = Convert.ToInt32(Request.Params["noid"]);
// set up the database access object
Database db = DatabaseFactory.CreateDatabase
("DatabaseConnectionString");
//the stored procedure MoveNote
string sqlCommand = "MoveNote";
DbCommand dbCommand = db.GetStoredProcCommand(sqlCommand);
// provide the input parameters for the SP
db.AddInParameter(dbCommand, "id", DbType.Int32, iNoteId);
db.AddInParameter(dbCommand, "new_order", DbType.Int32, iNewOrderId);
// execute the stored procedure
db.ExecuteNonQuery(dbCommand);
}
}There are two input arguments required by page
MoveNote.aspx, id and order,
which represent the id and order
properties of the to-be-moved tag respectively.
In this case, we used the "Sortable.create" method
to achieve the drag & drop functionality. However, the idea here is a bit
different from that in moving the tag category. Because the parameter id passed
to page MoveNote.aspx can be obtained by using the id property of the dragged
object, herein we do not need the starteffect callback function any more. While
in another callback function - endeffect send out the asychronous request to
page MoveNote.aspx to finish the backend database related operations. The relevant
script code is as follows.
Listing 11
function ShowNotes(xmlhttp) {
//make the automatically added tag own automatic completing functionality
EnableAutoCompleter();
//mark the start and end order during
the course of the dragging
var end_order;
Sortable.create("notes", {
//ghosting: true,
constraint: false,
endeffect: function(element) {
// mark the result order after dragging
end_order = Element.FindIndexOf("notes", element);
end_order = parseInt(end_order) + 1;
// invoke the page MoveNote.aspx in
// the Ajax mode to move the tag section
var pars = "id=" + element.id.getId() + "&noid=" + end_order;
new Ajax.Request("MoveNote.aspx", {mothed: "GET", parameters: pars});
}
});With enough comments between the lines, we do not dwell upon
the explanation. Next, let us take a glimpse at one of the running-time
snapshots, as shown in Figure 5 below.
Figure 5 - Dragging any tag info area to adjust the
tag sequence
On the right part of the figure, you can drag any rectangle
tag info area to adjust the tag sequence at discretion.
