The main purpose of this example is to use the draggable control of jquey.
Jquery, jquery-ui, and draggable are referenced in sequence. Then write the correspondingCodeFor more information about the code, seeProgram.
For draggable instructions, see: http://docs.jquery.com/UI/API/1.8/Draggable
Source code: Copy code The Code is as follows: <% @ page Language = "C #" autoeventwireup = "true" codebehind = "default. aspx. cs" inherits = "jquerydrag. _ default" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<SCRIPT type = "text/JavaScript" src = "JS/jquery-1.4.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "JS/jquery-ui-1.8.custom.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "JS/draggable. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
// Drag and Drop Method
$ ("# Imgdrag"). draggable ({
// Drag range
Containment: "# dragarea ",
// Start the event
Start: function (event, UI ){
Startdrag (event, UI );
},
// End the event
Stop: function (event, UI ){
Enddrag (event, UI );
}
})
});
// Start event Method
Function startdrag (event, UI ){
$ ("# Startdraginfo" ).html ("START: Left:" + UI. offset. Left + "upper:" + UI. offset. Top );
}
// End event Method
Function enddrag (event, UI ){
$ ("# Enddraginfo" ).html ("end: Left:" + UI. offset. Left + "upper:" + UI. offset. Top );
}
</SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<% -- Draggable reference manual Co., http://docs.jquery.com/UI/API/1.8/Draggable--%>
<% -- Drag range -- %>
<Div id = "dragarea" style = "width: 500px; Height: 500px; Border: 1px solid blue">
<% -- Record the information at the start of the drag -- %>
<Div id = "startdraginfo">
</Div>
<% -- Record the information at the end of the drag -- %>
<Div id = "enddraginfo">
</Div>
<Br/>
<Br/>
<% -- The dragged object -- %>
</Div>
</Form>
</Body>
</Html>
Package and download files