javascript

Jquery div drag effect sample code


<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Drag the 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="../Script/jquery-1.7.2.js"></script>
<script type="text/javascript"><!--
$(document).ready(function()
{
$(".show").mousedown(function(e)//E mouse events
{
$(this).css("cursor","move");//Change the shape of the mouse pointer

var offset = $(this).offset();//The location of the DIV on the page
var x = e.pageX - offset.left;//Gets the distance between the mouse pointer and the left edge of the DIV element
var y = e.pageY - offset.top;//Gets the distance between the mouse pointer and the border on the DIV element
$(document).bind("mousemove",function(ev)//Bind the move event of the mouse, because the cursor also needs to have an effect outside the DIV element, so use the doucment event instead of the DIV element event
{
$(".show").stop();//After adding this

var _x = ev.pageX - x;//Get the value of the movement in the X-axis
var _y = ev.pageY - y;//Get the value of the movement in the Y direction

$(".show").animate({left:_x+"px",top:_y+"px"},10);
});

});

$(document).mouseup(function()
{
$(".show").css("cursor","default");
$(this).unbind("mousemove");
})
})

// --></script>
</head>
<body>
<div class="show">
jquery implementation DIV Layer drag
</div>
</body>
</html>