首頁 > web前端 > js教程 > jQuery拖曳效果實作方法

jQuery拖曳效果實作方法

小云云
發布: 2018-01-06 10:31:19
原創
1138 人瀏覽過

本文主要為大家介紹了jquery實現拖曳效果的簡單程式碼,非常不錯,具有參考借鑒價值,需要的朋友參考下吧,希望能幫助到大家。

jQuery實作拖曳效果的實例程式碼,具體程式碼如下所示:

<!DOCTYPE html>
 <html>
<head>
<style>
 p{ 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;
$(&#39;p&#39;).mousedown(function(ev){
disX = ev.pageX - $(this).offset().left;//获取鼠标到元素的left,top位置
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
$(&#39;p&#39;).css(&#39;left&#39;,ev.pageX - disX);//获取移动后鼠标的位置,并重新赋值给元素
$(&#39;p&#39;).css(&#39;top&#39;,ev.pageY - disY);
});
$(document).mouseup(function(){
$(document).off();
});
return false;
});
 });
 </script>
 </head>
 <body>
 <p></p>
 </body>
 </html>
登入後複製

相關推薦:

微信小程式實作滑鼠拖曳效果實作方法

利用js實作div拖曳效果實例(相容PC端和行動裝置)

#js實作div在頁面拖曳效果

#

以上是jQuery拖曳效果實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板