jquery div拖动效果示例代码
生活随笔
收集整理的這篇文章主要介紹了
jquery div拖动效果示例代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jquery div拖動效果示例代碼 div拖動效果想必大家都有見到過吧，實現的方法也是有很多的，下面為大家將介紹使用jquery是如何實現的，感興趣的朋友不要錯過 復制代碼代碼如下: <%@ 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>拖動DIV-www.jbxue.com</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鼠標事件?
{?
$(this).css("cursor","move");//改變鼠標指針的形狀?
var offset = $(this).offset();//DIV在頁面的位置?
var x = e.pageX - offset.left;//獲得鼠標指針離DIV元素左邊界的距離?
var y = e.pageY - offset.top;//獲得鼠標指針離DIV元素上邊界的距離?
$(document).bind("mousemove",function(ev)//綁定鼠標的移動事件，因為光標在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件?
{?
$(".show").stop();//加上這個之后?
var _x = ev.pageX - x;//獲得X軸方向移動的值?
var _y = ev.pageY - y;//獲得Y軸方向移動的值?
$(".show").animate({left:_x+"px",top:_y+"px"},10);?
});?
});?
$(document).mouseup(function()?
{ // www.jbxue.com
$(".show").css("cursor","default");?
$(this).unbind("mousemove");?
})?
})?
// --></script>?
</head>?
<body>?
<div class="show">?
jquery實現DIV層拖動?
</div>?
</body>?
</html>? posted on 2013-12-09 06:31 snowfly123 閱讀(...) 評論(...) 編輯 收藏
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>拖動DIV-www.jbxue.com</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鼠標事件?
{?
$(this).css("cursor","move");//改變鼠標指針的形狀?
var offset = $(this).offset();//DIV在頁面的位置?
var x = e.pageX - offset.left;//獲得鼠標指針離DIV元素左邊界的距離?
var y = e.pageY - offset.top;//獲得鼠標指針離DIV元素上邊界的距離?
$(document).bind("mousemove",function(ev)//綁定鼠標的移動事件，因為光標在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件?
{?
$(".show").stop();//加上這個之后?
var _x = ev.pageX - x;//獲得X軸方向移動的值?
var _y = ev.pageY - y;//獲得Y軸方向移動的值?
$(".show").animate({left:_x+"px",top:_y+"px"},10);?
});?
});?
$(document).mouseup(function()?
{ // www.jbxue.com
$(".show").css("cursor","default");?
$(this).unbind("mousemove");?
})?
})?
// --></script>?
</head>?
<body>?
<div class="show">?
jquery實現DIV層拖動?
</div>?
</body>?
</html>? posted on 2013-12-09 06:31 snowfly123 閱讀(...) 評論(...) 編輯 收藏
轉載于:https://www.cnblogs.com/linuxnotes/p/3464589.html
總結
以上是生活随笔為你收集整理的jquery div拖动效果示例代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS 里面如何使用第三方应用程序打开自
- 下一篇： 初试牛刀---css中的小细节