jquery實(shí)現(xiàn)簡(jiǎn)單拖拽效果

更新時(shí)間：2020年07月20日 10:14:02 作者：Anna·

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)簡(jiǎn)單拖拽的具體代碼，供大家參考，具體內(nèi)容如下

基本思路：

1.首先需要鼠標(biāo)按下拖動(dòng)區(qū)域，也就是需要調(diào)用 mousedown 方法

2.鼠標(biāo)移動(dòng)，需要拖動(dòng)的元素跟著鼠標(biāo)移動(dòng)，調(diào)用 mousemove 方法

3.鼠標(biāo)彈起拖動(dòng)消失，調(diào)用 mouseup 方法

下面看一下代碼：

頁面結(jié)構(gòu)：

樣式：

.drag {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  position: absolute;
}

效果圖：

邏輯代碼：

// 拖拽函數(shù)
function function_drag(ele) {
 $(ele).mousedown(function(e){
 // 獲取鼠標(biāo)離元素(0,0)位置的距離
 var positionDiv = $(this).offset(); //offset 元素的偏移坐標(biāo) 有兩個(gè)屬性：top left（對(duì)顯示的元素有用）
 var distenceX = e.pageX - positionDiv.left; //page 顯示鼠標(biāo)指針的位置  （此時(shí)相當(dāng)于，鼠標(biāo)按下的初始值）
 var distenceY = e.pageY - positionDiv.top; //
 
 // 鼠標(biāo)移動(dòng)
 $(document).mousemove(function(e){
  // 獲取鼠標(biāo)的位移（鼠標(biāo)此時(shí)的page值 - 鼠標(biāo)按下時(shí)的初始值 = 元素的移動(dòng)值）
  var x = e.pageX - distenceX;
  var y = e.pageY - distenceY;
  if(x<0){
  x=0;
  }else if(x>$(document).width()-$(ele).outerWidth(true)){
  x = $(document).width()-$(ele).outerWidth(true);
  }
  if(y<0){
   y=0;
  }else if(y>$(document).height()-$(ele).outerHeight(true)){
   y = $(document).height()-$(ele).outerHeight(true);
  }
  $(ele).css({
  'left':x+'px',
  'top':y+'px'
  })
 })
 
 // 鼠標(biāo)抬起
 $(document).mouseup(function(e){
  $(document).off('mousemove');
 })
 })
} 
function_drag('.drag');

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery AJAX應(yīng)用實(shí)例總結(jié)
這篇文章主要介紹了jQuery AJAX應(yīng)用,結(jié)合實(shí)例形式總結(jié)分析了jQuery 使用AJAX訪問各種格式數(shù)據(jù)相關(guān)應(yīng)用操作實(shí)現(xiàn)技巧,需要的朋友可以參考下
2020-05-05
使用jQuery mobile庫檢測(cè)url絕對(duì)地址和相對(duì)地址的方法
這篇文章主要介紹了使用jQuery mobile庫監(jiān)測(cè)絕對(duì)地址和相對(duì)地址的方法,分別是isAbsoluteUrl()和isRelativeUrl()方法的使用,需要的朋友可以參考下
2015-12-12
jQuery的觀察者模式詳解
本文主要是介紹了jQuery中on方法及trigger方法，以及圍繞這個(gè)方法來體驗(yàn)的觀察者模式，是篇非常不錯(cuò)的文章，對(duì)我們理解觀察者模式很有幫助。
2014-12-12
jQuery實(shí)現(xiàn)平滑滾動(dòng)頁面到指定錨點(diǎn)鏈接的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)平滑滾動(dòng)頁面到指定錨點(diǎn)鏈接的方法,涉及jquery鼠標(biāo)事件及頁面滾動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
jQuery的12招常用技巧分享
jquery是輕量級(jí)的js庫(壓縮后只有21k) ，它兼容CSS3，還兼容各種瀏覽器。由于jQuery對(duì)象本身是一個(gè)集合。所以如果jQuery對(duì)象要轉(zhuǎn)換為dom對(duì)象則必須取出其中的某一項(xiàng)，一般可通過索引取出。
2011-08-08
jQuery-ui引入后Vs2008的無智能提示問題解決方法
引入jQuery-vsdoc文件后，jQuery庫就能智能提示了，解決方法很簡(jiǎn)單在jQuery-ui的目錄下再加入一個(gè)空的JS文件，命名jquery-ui-vsdoc.js
2014-02-02
jquery實(shí)現(xiàn)點(diǎn)擊TreeView文本父節(jié)點(diǎn)展開/折疊子節(jié)點(diǎn)
今天客戶提出要點(diǎn)擊菜單（TreeView實(shí)現(xiàn)的）的父級(jí)節(jié)點(diǎn)時(shí)，展開節(jié)點(diǎn),很多新手朋友可能對(duì)此會(huì)很陌生，接下來介紹解決方法，感興趣的朋友可以了解下
2013-01-01
jQuery實(shí)現(xiàn)彈窗下底部頁面禁止滑動(dòng)效果
在項(xiàng)目開發(fā)過程中，經(jīng)常會(huì)遇到帶有彈窗的頁面，尤其是在移動(dòng)端。下面通過本文給大家分享jQuery實(shí)現(xiàn)彈窗下底部頁面禁止滑動(dòng)效果，需要的朋友參考下吧
2017-12-12
JQuery入門—編寫一個(gè)簡(jiǎn)單的JQuery應(yīng)用案例
首先引入JQuery文件庫只需將文件導(dǎo)入頁面中即可，即在<head></head>中，接下來詳細(xì)介紹，感興趣的朋友可以了解下
2013-01-01
jQuery實(shí)現(xiàn)開關(guān)燈效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)開關(guān)燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08