jQuery實現(xiàn)拖動效果的實例代碼
更新時間：2017年06月25日 14:50:22 作者：ranruci
這篇文章給大家介紹了jquery實現(xiàn)拖動效果的簡單代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
jQuery實現(xiàn)拖動效果的實例代碼，具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
div{ width:100px; height:100px; background:red; position:absolute;}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
var disX = 0;
var disY = 0;
$('div').mousedown(function(ev){
disX = ev.pageX - $(this).offset().left;//獲取鼠標(biāo)到元素的left,top位置
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
$('div').css('left',ev.pageX - disX);//獲取移動后鼠標(biāo)的位置，并重新賦值給元素
$('div').css('top',ev.pageY - disY);
});
$(document).mouseup(function(){
$(document).off();
});
return false;
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
以上所述是小編給大家介紹的jQuery實現(xiàn)拖動效果的實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
全面解析jQuery $(document).ready()和JavaScript onload事件
這篇文章主要介紹了全面解析jQuery $(document).ready()和JavaScript onload事件的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jquery分割字符串的方法,涉及jQuery中使用split方法進行字符串分割的相關(guān)技巧,需要的朋友可以參考下2015-06-06
JQuery操作textarea,input,select,checkbox方法
本文給大家匯總介紹了一些JQuery操作textarea,input,select,checkbox的方法和技巧，十分的簡單實用，都是小編項目中使用過的，這里推薦給大家。2015-09-09
JQuery獲取樣式中的background-color顏色值的問題
用JQuery獲取樣式中的background-color的值時發(fā)現(xiàn)在獲取到的顏色值在IE中與Chrome、Firefox顯示的格式不一樣，經(jīng)搜索找到了下段代碼可解決此問題，感興趣的朋友可以參考下2013-08-08
jQuery 的toggle()函數(shù)使用show()或hide()函數(shù)來切換HTML元素的可見狀態(tài)。今天我們來探討下jquery中toggle函數(shù)交替使用問題2015-06-06
Jquery知識點一 Jquery的ready和Dom的onload的區(qū)別
onload是所有dom元素創(chuàng)建完畢，圖片、css等都加在完畢后才觸發(fā) ready則是dom元素創(chuàng)建完畢后就被觸發(fā)2011-01-01
jQuery實現(xiàn)圖片加載完成后改變圖片大小的方法
這篇文章主要介紹了jQuery實現(xiàn)圖片加載完成后改變圖片大小的方法,結(jié)合實例形式分析了jQuery圖片樣式與頁面元素屬性動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-03-03
基于Jquery代碼實現(xiàn)支持PC端手機端幻燈片代碼
支持PC端手機端幻燈片代碼是一款支持移動觸摸，支持鼠標(biāo)拖拽切換，支持帶進度條的自動播放模式，本文給大家分享一款基于jquery代碼實現(xiàn)支持pc端手機端幻燈片代碼，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
JQuery中Ajax()的data參數(shù)類型實例分析
這篇文章主要介紹了JQuery中Ajax()的data參數(shù)類型,結(jié)合實例形式較為詳細的分析了ajax方法中data的具體類型,需要的朋友可以參考下2015-12-12
JQUERY 對象與DOM對象之兩者相互間的轉(zhuǎn)換
jquery對象的相應(yīng)方法DOM對象不能使用，而DOM對象的相應(yīng)方法jquery也不能使用。所以在具體項目中要注意Jquery對象與DOM對象的轉(zhuǎn)換問題2009-04-04