Home > Developer > Web Develop
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Drag div</title>
<style type= "Text/css" >
. show{
Background: #7cd2f8;
width:100px;
height:100px;
Text-align:center;
Position:absolute;
Z-index:1;
left:100px;
top:100px;
}
</style>
<script type= "Text/javascript" src= "Jquery-1.8.0.min.js" ></script>
<script type= "Text/javascript" ><!--
$ (document). Ready (function ()
{
$ (". Show"). MouseDown (function (e)//e mouse event
{
$ (this). CSS ("cursor", "move");//Change the shape of the mouse pointer
var offset = $ (this). offset ();//div in the position of the page
var x = e.pagex-offset.left;//Gets the distance of the mouse pointer from the left edge of the DIV element
var y = e.pagey-offset.top;//Gets the distance of the mouse pointer from the top edge of the DIV element
$ (document). Bind ("MouseMove", function (EV)//The move event that binds the mouse, because the cursor is also effective outside the DIV element, so use doucment events instead of DIV element events
{
$ (". Show"). Stop ();//After adding this
var _x = ev.pagex-x;//Gets the value of the x-axis movement
var _y = ev.pagey-y;//Gets the value of the y-axis movement
$ (". Show"). Animate ({left:_x+ "px", top:_y+ "px"},10);
});
});
$ (document). MouseUp (function ()
{
$ (". Show"). CSS ("cursor", "Default");
$ (this). Unbind ("MouseMove");
})
})
--></script>
<body>
<div class= "Show" >
1
</div>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
