<Style type = "text/css">
Img
{
Width: 100px;
Height: 100px;
}
# Mydiv
{
Width: 500px;
Height: 300px;
Border: solid 1px red;
}
# Mydiv2
{
Width: 500px;
Height: 300px;
Border: solid 1px red;
}
</Style>
<Script src = "js/Jquery1.7.js" type = "text/javascript"> </script>
<Script src = "js/jquery. ui. core. js" type = "text/javascript"> </script>
<Script src = "js/jquery. ui. widget. js" type = "text/javascript"> </script>
<Script src = "js/jquery. ui. mouse. js" type = "text/javascript"> </script>
<Script src = "js/jquery. ui. draggable. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ('Img '). draggable ({
// Axis: 'y' // you can only drag the image along the y axis.
// Containment: '# mydiv' // specifies the area to be dragged.
// Containment: 'parent' // another method of writing the parent container
// Containment: '# mydiv2' // The specified drag area may not be the parent container of the element.
// Grid: [50, 50]
Opacity: 0.3, // sets the transparency when dragging
// Revert: true,
Start: function (){
$ ('# Mydiv2'). text ('starting to move ');
},
Stop: function (){
$ ('# Mydiv2'). text ('stopped ');
},
Drag: function (){
// $ ('# Mydiv2'). text ('keep trying ');
$ ('# Mydiv2 '). text ($ ('img '). offset (). left + "," + $ ('img '). offset (). top );
}
});
// Set the distance (horizontal and vertical) between an element and the upper edge of the browser)
$ ('# Button1'). click (function (){
$ ('Img '). offset ({
Left: 200,
Maximum: 200
});
})
})
</Script>
</Head>
<Body>
<Div id = "mydiv">
</div>
<Div id = "mydiv2">
<Input id = "Button1" type = "button" value = "button"/>
</Div>
</Body>