jQuery實(shí)現(xiàn)拖動效果的實(shí)例代碼
更新時間：2017年06月25日 14:50:22 作者：ranruci
這篇文章給大家介紹了jquery實(shí)現(xiàn)拖動效果的簡單代碼，非常不錯，具有參考借鑒價(jià)值，需要的朋友參考下吧
jQuery實(shí)現(xiàn)拖動效果的實(shí)例代碼，具體代碼如下所示：
<!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實(shí)現(xiàn)拖動效果的實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
jQuery獲取多種input值的簡單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query獲取多種input值的簡單實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
如何使用CSS3和JQuery easing 插件制作絢麗菜單
這篇文章主要介紹了如何使用CSS3和JQuery easing 插件制作絢麗菜單，這樣做可以讓有菜單的盒子滑出，并且彈出縮略圖。在某些菜單項(xiàng)中我們還包含著有進(jìn)一步鏈接的子菜單。取決于我們鼠標(biāo)在菜單項(xiàng)上的停懸，子菜單將向左或向右滑動。,需要的朋友可以參考下2019-06-06
jquery實(shí)現(xiàn)文字由下到上循環(huán)滾動的實(shí)例代碼
這篇文章介紹了jquery實(shí)現(xiàn)文字由下到上循環(huán)滾動的實(shí)例代碼，有需要的朋友可以參考一下2013-08-08
使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版
這篇文章主要介紹了使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版,需要的朋友可以參考下2014-06-06
jquery-easyui關(guān)閉tab自動切換到前一個tab
考慮到用戶體驗(yàn)，當(dāng)用戶關(guān)閉tab時，自動切換到前一個tab不至于讓用戶看到空的界面。2010-07-07
Jquery進(jìn)度條插件 Progress Bar小問題解決
今天遇到一個進(jìn)度條的小問題，搞的我小糾結(jié)了一會，最后感謝同事分享文章，得以結(jié)局，呵呵，小經(jīng)驗(yàn)還是要保存的2011-07-07
解決3.01版的jquery.form.js中文亂碼問題的解決方法
最近用到了jquery的一個fom插件，是一個全面支持表單的jQuery插件。昨天在用ajaxSubmit進(jìn)行Form Post提交的時候，發(fā)現(xiàn)服務(wù)器端取回的中文數(shù)據(jù)居然是亂碼。這個可能是因?yàn)閖query是utf-8，不支持gb23122012-03-03
jQuery獲取父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)的代碼
這篇文章主要介紹了jQuery獲取父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)的代碼,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了利用jQuery給表格添加分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
jQuery事件_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery事件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07