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