jQuery實(shí)現(xiàn)拖動效果的實(shí)例代碼
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-06jquery實(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-06jquery-easyui關(guān)閉tab自動切換到前一個tab
考慮到用戶體驗(yàn),當(dāng)用戶關(guān)閉tab時,自動切換到前一個tab不至于讓用戶看到空的界面。2010-07-07Jquery進(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-03jQuery獲取父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)的代碼
這篇文章主要介紹了jQuery獲取父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)的代碼,需要的朋友可以參考下2023-06-06jQuery事件_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery事件的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07