Use the jquey Drag Control draggable

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:Download

<% @ 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 >

<ScriptType= "Text/JavaScript"SRC= "JS/jquery-ui-1.8.custom.min.js"> </Script>

<ScriptType= "Text/JavaScript"SRC= "JS/draggable. js"> </Script>

< Script Type = "Text/JavaScript" >
$ (Document). Ready ( Function (){
// Drag Method
$ ( " # Imgdrag " ). Draggable ({
// Drag range
Containment: " # Dragarea " ,
// Start event
Start: Function (Event, UI ){
Startdrag (event, UI );
},
// End event
Stop: Function (Event, UI ){
Enddrag (event, UI );
}
})
});

// Start event Method
Function Startdrag (event, UI ){
$ ( " # Startdraginfo " Pai.html ( " Start: left: "   + Ui. offset. Left +   " On: "   + Ui. offset. Top );
}
// End event Method
Function Enddrag (event, UI ){
$ ( " # Enddraginfo " Pai.html ( " End: left: "   + Ui. offset. Left +   " On: "   + Ui. offset. Top );
}

</ Script >

</ Head >
< Body >
< Form ID = "Form1" Runat = "Server" >
<% -- Draggable reference manual 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 />
<% -- Dragged object -- %>
< IMG ID = "Imgdrag" SRC = "Img/imggreen.gif"   />
</ Div >
</ Form >
</ Body >
</ Html >