Code segment used to move images on a Web page

The following JavaScript code is mainly used to generate an Image project on the screen and perform operations such as detaching and moving through mouse events.
<Script language = "javascript" type = "text/javascript">
Var top, left;
Var src, drag, dir, ope, refer, halfwidth;
Var unit = 30;

Var aryItems, itemNum = 10, index, isInit, id, max = 23;

Function PageLoad ()
{
Document. form1.onsubmit = OnSubmit;

AryItems = new Array (itemNum );
Top = document. getElementById ("TABLE"). getClientRects () [0]. top;
Left = document. getElementById ("TABLE"). getClientRects () [0]. left;

If (document. getElementById ("_ Gantt"). value! = Null & document. getElementById ("_ Gantt"). value! = "")
{
Var gantt = document. getElementById ("_ Gantt"). value;
Var array = gantt. split (";");
Var length = array. length-1;
Var start, width, item;

For (index = 0; index <length; index ++)
{
Item = array [index]. split (",");
Start = item [0];
Width = item [1];

Id = "Item" + index;
AryItems [index] = id;

Var track = document. createElement ("IMG ");
Track. setAttribute ("id", id );
Track. setAttribute ("src", "blue.gif ");

Document. body. appendChild (track );
Document. getElementById (id). style. position = "absolute ";
Document. getElementById (id). style. top = top + unit * index;
Document. getElementById (id). style. left = left + unit * start;
Document. getElementById (id). width = unit * width;
Document. getElementById (id). style. zIndex = 9;
}
}
Else
{
For (index = 0; index <itemNum; index ++)
{
Id = "Item" + index;
AryItems [index] = id;

Var track = document. createElement ("IMG ");
Track. setAttribute ("id", id );
Track. setAttribute ("src", "blue.gif ");

Document. body. appendChild (track );
Document. getElementById (id). style. position = "absolute ";
Document. getElementById (id). style. top = top + unit * index;
Document. getElementById (id). style. left = left + unit * index;
Document. getElementById (id). width = unit;
Document. getElementById (id). style. zIndex = 9;
}
}
Drag = false;
Left = document. getElementById (aryItems [0]). getClientRects () [0]. left;
}

Function OnDrag ()
{
If (event. srcElement. tagName! = "IMG "&&! Drag)
{
If (event. srcElement. id = "btnTrim ")
{
// OnTrim ();
}
}
Else
{
If (! Drag)
{
Src = event. srcElement;
Halfwidth = src. width/2;
Drag = true;

// Determine the direction of the cursor
If (event. clientX <src. getClientRects () [0]. left + halfwidth)
{
Dir = "Backward ";
Refer = src. getClientRects () [0]. left + src. width;
}
Else
{
Dir = "Forward ";
Refer = src. getClientRects () [0]. left;
}

// Operation token judgment: 1. Mobile token 2. Small value/large value
If (event. shiftLeft)
{
Ope = "Move ";
Refer = event. clientX-src.getClientRects () [0]. left;
}
Else
{
Ope = "Scale ";
}
}
Else
{
If (ope = "Scale ")
{
Var sleft = Math. ceil (src. getClientRects () [0]. left-left)/unit-1) * unit + left;
Var header = src. getClientRects () [0]. The left-src.getClientRects () [0]. left;
Var tail = src. width-header-Math.ceil (src. width-header)/unit) * unit;
Var swidth = Math. ceil (src. width-header)/unit) * unit;
If (header> 0)
{
Swidth = swidth + unit;
}
If (tail> 0)
{
Swidth = swidth + unit;
}
Src. style. left = sleft;
Src. width = swidth;
}

If (ope = "Move ")
{
Src. style. left = Math. ceil (src. getClientRects () [0]. left-left)/unit-1) * unit + left;
}

Drag = false;
OnTrim ()
}
}
}

Function OnScale ()
{
If (src! = Null & drag)
{
If (ope = "Scale ")
{
// Small shard/large shard combination
If (dir = "Forward ")
{
If (event. clientX-refer> = unit)
{
Src. width = event. clientX-refer;
}
}
Else
{
If (refer-event.clientX> unit)
{
Src. style. left = event. clientX;
Src. width = refer-src.getClientRects () [0]. left;
}
}
}
Else
{
// Mobile site combinationHttp://www.devdao.com/
Src. style. left = event. clientX-refer;
}
}

If (event. srcElement! = Null)
{
If (event. srcElement. tagName = "IMG ")
{
If (event. clientX <event. srcElement. getClientRects () [0]. left + unit/2)
{
Event. srcElement. style. cursor = "w-resize ";
}
Else
{
Event. srcElement. style. cursor = "e-resize ";
}
}
}
}

Function OnTrim ()
{
Var pre, post;
For (index = 0; index <itemNum-1; index ++)
{
Pre = document. getElementById (aryItems [index]);
Post = document. getElementById (aryItems [index + 1]);
If (pre. getClientRects () [0]. left + pre. width! = Post. getClientRects () [0]. left)
{
Post. style. left = pre. getClientRects () [0]. left + pre. width-2;
}
}

For (index = 0; index <itemNum; index ++)
{
Pre = document. getElementById (aryItems [index]);
If (pre. getClientRects () [0]. left> = left + unit * max)
{
Pre. style. left = left + unit * max-2;
Pre. width = unit;
}

If (pre. getClientRects () [0]. left <left + unit * max) & (pre. getClientRects () [0]. left + pre. width> left + unit * max ))
{
Pre. width = left + unit * max-pre.getClientRects () [0]. left;
}
}
}

Function OnSubmit ()
{
Var t = "";
For (index = 0; index <itemNum; index ++)
{
T = t + (document. getElementById (aryItems [index]). getClientRects () [0]. left-left)/unit). toString ();
T = t + ",";
T = t + (document. getElementById (aryItems [index]). width/unit). toString ();
T = t + ";";
}
Document. getElementById ("_ Gantt"). value = t;
}

Document. onmousedown = OnDrag;
Document. onmousemove = OnScale;
</Script>
When a Button is used for form submission, the OnSubmit code segment is executed first. On the server side, the operation is to keep everything sent from the client intact, which can be added to the data modification process, you can also import data into the page to generate a screen.
Protected Sub button#click () Sub button#click (ByVal sender As Object, ByVal e As System. EventArgs) Handles Button1.Click
Response. Write (Request. Params. Item ("_ Gantt") & "<BR> ")
Dim strGantt As String = Request. Params. Item ("_ Gantt ")
ClientScript. RegisterHiddenField ("_ Gantt", strGantt)

End Sub

Protected Sub Page_Load () Sub Page_Load (ByVal sender As Object, ByVal e As System. EventArgs) Handles Me. Load
If Not IsPostBack Then
ClientScript. RegisterHiddenField ("_ Gantt", String. Empty)
End If
End Sub is expected to be useful to everyone.