欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)拖拽的方法分析

 更新時(shí)間:2016年12月20日 14:56:58   作者:鬼畜十三  
這篇文章主要介紹了JS實(shí)現(xiàn)拖拽的方法,結(jié)合實(shí)例形式分析了JS拖拽的實(shí)現(xiàn)原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例分析了JS實(shí)現(xiàn)拖拽的方法。分享給大家供大家參考,具體如下:

分析:

1.鼠標(biāo)按下,拖拽開(kāi)始,鼠標(biāo)移動(dòng),拖拽進(jìn)行,鼠標(biāo)抬起,拖拽結(jié)束(三個(gè)事件)

2.被拖動(dòng)元素與鼠標(biāo)之間的位置在拖動(dòng)過(guò)程中始終不變,利用這個(gè)原理,被拖動(dòng)元素的位置就是鼠標(biāo)的左(上)邊距-鼠標(biāo)與被拖動(dòng)元素之間的距離

注意:onmousemove應(yīng)該是在onmousedown發(fā)生時(shí)進(jìn)行,不然不需要點(diǎn)擊也能拖動(dòng)了。

用戶可能會(huì)將拖動(dòng)層脫出窗口外。

核心代碼:

window.onload=function(){
  var box=document.getElementById("div");
  var disX;
  var disY;
  box.onmousedown=function(ev){ //如果三個(gè)事件都用在box上,拖得快一點(diǎn),鼠標(biāo)脫離移動(dòng)層,移動(dòng)層就拖不動(dòng)了
    var oEvent=ev||event;
    disX=oEvent.clientX-box.offsetLeft;
    disY=oEvent.clientY-box.offsetTop;
    document.onmousemove=function(ev){
      var oEvent=ev||event;
      var l=oEvent.clientX-disX;
      var t=oEvent.clientY-disY;
      if(l<0){
        l=0;
      }else if(l>document.documentElement.clientWidth-box.offsetWidth){
        l=document.documentElement.clientWidth-box.offsetWidth;
      }
      if(t<0){
        t=0;
      }else if(t>document.documentElement.clientHeight-box.offsetHeight){
        t=document.documentElement.clientHeight-box.offsetHeight;
      }
      box.style.left=l+'px';
      box.style.top=t+'px';
    };
    document.onmouseup=function(){
      document.onmousemove=null;
      document.onmouseup=null; //鼠標(biāo)抬起來(lái)后,onmouseup事件本身也沒(méi)意義了,所以最好清理掉
    };
    return false; //阻止默認(rèn)行為,空的div在低版本ff下,第二次拖動(dòng)手型會(huì)變異常
  };
}

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)習(xí)筆記

    JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)

    這篇文章主要介紹了JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)習(xí)筆記,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • 原生微信小程序/uniapp使用空格占位符無(wú)效的解決辦法

    原生微信小程序/uniapp使用空格占位符無(wú)效的解決辦法

    最近需要在字體中間加空白占位符,在嘗試使用 之后,還是不能使用,下面這篇文章主要給大家介紹了關(guān)于原生微信小程序/uniapp使用空格占位符無(wú)效的解決辦法,需要的朋友可以參考下
    2023-02-02
  • 走進(jìn)javascript——不起眼的基礎(chǔ),值和分號(hào)

    走進(jìn)javascript——不起眼的基礎(chǔ),值和分號(hào)

    本文主要介紹了javascript的基礎(chǔ)知識(shí)--值和分號(hào),具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-02-02
  • 微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置圖文詳解

    微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置圖文詳解

    這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置,結(jié)合實(shí)例形式詳細(xì)分析了微信小程序的相關(guān)注冊(cè)、配置及基本使用方法,并配以圖片加以說(shuō)明,需要的朋友可以參考下
    2019-03-03
  • three.js修改物體的位置代碼實(shí)例

    three.js修改物體的位置代碼實(shí)例

    在Three.js中物體通常是通過(guò)創(chuàng)建"網(wǎng)格"(Mesh)對(duì)象來(lái)描述的,下面這篇文章主要給大家介紹了關(guān)于three.js修改物體位置的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-11-11
  • JS面向?qū)ο?、prototype、call()、apply()

    JS面向?qū)ο?、prototype、call()、apply()

    那天用到prototype.js于是打開(kāi)看看,才看幾行就滿頭霧水,原因是對(duì)js的面向?qū)ο蟛皇呛苁煜ぃ谑前俣?google了一把,最后終于算小有收獲,寫此紀(jì)念一下^_^。
    2009-05-05
  • 原生JS實(shí)現(xiàn)目錄滾動(dòng)特效

    原生JS實(shí)現(xiàn)目錄滾動(dòng)特效

    這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)目錄滾動(dòng)特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • JavaScript網(wǎng)頁(yè)表單form中禁止自動(dòng)提交的兩種方式

    JavaScript網(wǎng)頁(yè)表單form中禁止自動(dòng)提交的兩種方式

    本文是我本人在開(kāi)發(fā)網(wǎng)頁(yè)時(shí),在表單中加入了button按鈕,本來(lái)是用于jQuery點(diǎn)擊相應(yīng)事件的按鈕,然后,但我點(diǎn)擊button時(shí),發(fā)現(xiàn)不是達(dá)到j(luò)Query指定效果,所以在本文中,我們將討論網(wǎng)頁(yè)表單(form)中提交的兩種方式,需要的朋友可以參考下
    2024-06-06
  • 基于wordpress的ajax寫法詳解

    基于wordpress的ajax寫法詳解

    下面小編就為大家分享一篇基于wordpress的ajax寫法詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-01
  • ES6 迭代器(Iterator)和 for.of循環(huán)使用方法學(xué)習(xí)(總結(jié))

    ES6 迭代器(Iterator)和 for.of循環(huán)使用方法學(xué)習(xí)(總結(jié))

    這篇文章主要介紹了ES6 迭代器(Iterator)和 for.of循環(huán)使用方法學(xué)習(xí)總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02

最新評(píng)論