jquery div拖動效果示例代碼
更新時間：2013年12月08日 17:33:59 作者：
div拖動效果想必大家都有見到過吧，實現(xiàn)的方法也是有很多的，下面為大家將介紹使用jquery是如何實現(xiàn)的，感興趣的朋友不要錯過
復(fù)制代碼 代碼如下:
<%@ 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</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鼠標(biāo)事件
{
$(this).css("cursor","move");//改變鼠標(biāo)指針的形狀
var offset = $(this).offset();//DIV在頁面的位置
var x = e.pageX - offset.left;//獲得鼠標(biāo)指針離DIV元素左邊界的距離
var y = e.pageY - offset.top;//獲得鼠標(biāo)指針離DIV元素上邊界的距離
$(document).bind("mousemove",function(ev)//綁定鼠標(biāo)的移動事件，因為光標(biāo)在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()
{
$(".show").css("cursor","default");
$(this).unbind("mousemove");
})
})
// --></script>
</head>
<body>
<div class="show">
jquery實現(xiàn)DIV層拖動
</div>
</body>
</html>
相關(guān)文章
jQuery中table數(shù)據(jù)的值拷貝和拆分
在開發(fā)的過程中，經(jīng)常會遇到彈出框顯示前一頁table列表的情況，這時候會有好多方法來來解決。下面小編給大家介紹怎么用jquery將值拷貝到第二頁并拆分拷貝的值，需要的朋友參考下2017-03-03
jquery 操作單選框，復(fù)選框，下拉列表實現(xiàn)代碼
jquery 操作單選框，復(fù)選框，下拉列表實現(xiàn)代碼，需要的朋友可以參考下。2009-10-10
jQuery簡單實現(xiàn)仿京東分類導(dǎo)航層效果
這篇文章主要介紹了jQuery簡單實現(xiàn)仿京東分類導(dǎo)航層效果,涉及jQuery針對鼠標(biāo)事件的響應(yīng)及頁面元素動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了jquery插件編寫countdown計時器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
jquery讀取xml文件實現(xiàn)省市縣三級聯(lián)動的方法
這篇文章主要介紹了jquery讀取xml文件實現(xiàn)省市縣三級聯(lián)動的方法,涉及jQuery操作XML文件及Ajax動態(tài)加載的技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了基于jQuery封裝的分頁組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
模仿jQuery each函數(shù)的鏈?zhǔn)秸{(diào)用
模仿jQuery each函數(shù)的鏈?zhǔn)秸{(diào)用實現(xiàn)代碼。2009-07-07
jQuery通過控制節(jié)點實現(xiàn)僅在前臺通過get方法完成參數(shù)傳遞
這篇文章主要介紹了jQuery通過控制節(jié)點實現(xiàn)僅在前臺通過get方法完成參數(shù)傳遞的功能,實例分析了jQuery操作節(jié)點的技巧與控制前臺get方法傳遞參數(shù)的用法,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
本文給大家分享一款貼近用戶體驗的Jquery日期、時間選擇插件，需要的朋友可以參考下2015-08-08
簡短幾句jquery代碼的實現(xiàn)一個圖片向上滾動切換
短幾句jquery代碼實現(xiàn)一個圖片向上滾動切換，需要的朋友可以參考下。2011-09-09