The main purpose of this example is to use the Jquey draggable control.
Use first in turn refers to Jquery,jquery-ui, draggable three JS. Then write the corresponding code in JS, the relevant code description please see the comments in the program.
For instructions on Draggable please refer to: http://docs.jquery.com/UI/API/1.8/Draggable
Source:
Copy Code code 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 ">
<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 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"). HTML ("Start: Left:" + Ui.offset.left + "on:" + ui.offset.top);
}
End Event Method
function EndDrag (event, UI) {
$ ("#EndDragInfo"). HTML ("End: Left:" + Ui.offset.left + "on:" + ui.offset.top);
}
</script>
<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 ">
<%--records the information at the start of a drag--%>
<div id= "Startdraginfo" >
</div>
<%--records the information at the end of the drag--%>
<div id= "Enddraginfo" >
</div>
<br/>
<br/>
<%--the object being dragged--%>
</div>
</form>
</body>
File package Download
