快捷導(dǎo)航

jQuery實(shí)現(xiàn)div隨意拖動(dòng)的實(shí)例代碼(通用代碼)

更新時(shí)間：2016年01月28日 09:24:01 作者：phpervip

這篇文章主要介紹了jQuery實(shí)現(xiàn)div隨意拖動(dòng)的實(shí)例代碼，涉及到j(luò)query div隨意拖動(dòng)相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧

注意js放的位置，要放的靠近，若被其他覆蓋，則無(wú)法移動(dòng)。

比如：

<div id="move">可移動(dòng)的DIV</div>

引入jquery.js, jquery-ui.js,

<script scr="http://code.jquery.com/jquery-1.10.2.js"></script>
<script scr="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

一句：

$("#move").draggable();

如希望，點(diǎn)住時(shí)鼠標(biāo)變手形：

$("#move").mousedown(function(){
$(this).css("cursor","pointer");
}).mouseup(function(){
$(this).css("cursor","default");
});

下面給大家分享一段通用代碼jquery實(shí)現(xiàn)拖動(dòng)div的通用方法

<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在頁(yè)面的位置 
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)的移動(dòng)事件，因?yàn)楣鈽?biāo)在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 
{ 
$(".show").stop();//加上這個(gè)之后 
var _x = ev.pageX - x;//獲得X軸方向移動(dòng)的值 
var _y = ev.pageY - y;//獲得Y軸方向移動(dòng)的值 
$(".show").animate({left:_x+"px",top:_y+"px"},10); 
}); 
}); 
$(document).mouseup(function() 
{ 
$(".show").css("cursor","default"); 
$(this).unbind("mousemove"); 
}) 
}) 
// --></script>

您可能感興趣的文章:

相關(guān)文章

詳解jquery validate實(shí)現(xiàn)表單驗(yàn)證（正則表達(dá)式）
本篇文章主要介紹了jquery validate實(shí)現(xiàn)表單驗(yàn)證（正則表達(dá)式），用戶填寫表單時(shí)，可以快速地對(duì)用戶填寫的數(shù)據(jù)進(jìn)行驗(yàn)證，并做出反饋。有興趣的可以了解一下。
2017-01-01
jQuery插件開發(fā)發(fā)送短信倒計(jì)時(shí)功能代碼
最近項(xiàng)目開發(fā)中遇到這樣的功能:1.點(diǎn)擊按鈕的時(shí)候，可以進(jìn)行倒計(jì)時(shí)，倒計(jì)時(shí)自定義.2.當(dāng)接收短信失敗后，倒計(jì)時(shí)停止，可點(diǎn)擊重新發(fā)送短信.3.點(diǎn)擊的元素支持一般標(biāo)簽和input標(biāo)簽?？此坪軓?fù)雜其實(shí)實(shí)現(xiàn)代碼很簡(jiǎn)單，下面小編給大家分享下實(shí)現(xiàn)代碼，需要的朋友參考下吧
2017-05-05
jQuery+CSS實(shí)現(xiàn)簡(jiǎn)單切換菜單示例
這篇文章主要介紹了jQuery+CSS實(shí)現(xiàn)簡(jiǎn)單切換菜單的方法,涉及jQuery針對(duì)頁(yè)面元素的遍歷及樣式動(dòng)態(tài)變換相關(guān)技巧,需要的朋友可以參考下
2016-07-07
js/jquery判斷瀏覽器的方法小結(jié)
在網(wǎng)站前端開發(fā)中，瀏覽器兼容性是前端開發(fā)框架要解決的第一個(gè)問題，要解決兼容性問題就得首先準(zhǔn)確判斷出瀏覽器的類型及其版本，而判斷瀏覽器的版本一般只能通過(guò)分析瀏覽器的userAgent才能知道.今天我們把各種判斷方法都總結(jié)一下，希望對(duì)大家有所幫助
2014-09-09
jQuery使用方法
本文主要介紹了jQuery的使用方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
jQuery圖片的展開和收縮實(shí)現(xiàn)代碼
圖片的展開和收縮使用jquery實(shí)現(xiàn)不可思議吧，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)jquery 有所幫助
2013-04-04
妙用Jquery的val()方法
Jquery的val()方法不僅能夠設(shè)置元素的值，同時(shí)也能獲取元素的值。常見的操作是對(duì)文本框的操作，比如判斷郵箱地址等
2012-06-06
Jquery實(shí)現(xiàn)點(diǎn)擊按鈕,連續(xù)地向textarea中添加值的實(shí)例代碼
本篇文章主要是對(duì)Jquery實(shí)現(xiàn)點(diǎn)擊按鈕,連續(xù)地向textarea中添加值的實(shí)例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-03-03
jBox 2.3基于jquery的最新多功能對(duì)話框插件常見使用問題解答
jBox 是一款基于 jQuery 的多功能對(duì)話框插件，能夠?qū)崿F(xiàn)網(wǎng)站的整體風(fēng)格效果，給用戶一個(gè)新的視覺享受。
2011-11-11
jquery 實(shí)現(xiàn)拖動(dòng)文件上傳加載進(jìn)度條功能
這篇文章主要介紹了jquery 實(shí)現(xiàn)拖動(dòng)文件上傳加載進(jìn)度條功能,主要用到的是HTML5的ondrop事件，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-03-03