JS+DIV實現(xiàn)拖動效果

本文實例為大家分享了JS+DIV實現(xiàn)拖動效果的具體代碼，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計,網(wǎng)站設(shè)計,企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為上千余家服務(wù),創(chuàng)新互聯(lián)網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣服務(wù)!

效果圖

JS+DIV實現(xiàn)拖動效果

思路

JS+DIV實現(xiàn)拖動效果

代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="main" >
  <div id="title" ></div>
  <div class="box"></div>
</div>
<script>

  var startx;
  var starty;
  var startLeft;
  var startTop;
  var titleDiv=document.getElementById("title");
  var mainDiv=document.getElementById("main");
  var isDown=false;
//  鼠標(biāo)按下
  function movedown(e){
    e=e?e:window.event;
    isDown=true;
    startx=e.clientX;
    starty=e.clientY;
    startLeft=parseInt(mainDiv.style.left);
    startTop=parseInt(mainDiv.style.top);
  }
//  鼠標(biāo)移動
  function move(e){
    e=e?e:window.event;
    if(isDown) {
      mainDiv.style.left = e.clientX - (startx - startLeft)+"px";
      mainDiv.style.top = e.clientY - (starty - startTop)+"px";
    }
  }
//  鼠標(biāo)松開
  function moveup(){
    isDown=false;
  }
  titleDiv.οnmοusedοwn=movedown;
  titleDiv.οnmοusemοve=move;
  titleDiv.οnmοuseup=moveup;
</script>
</body>
</html>

優(yōu)化(封裝，以及解決拖動問題（事件捕獲）)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="main" >
  <div id="title"
     ></div>
  <div class="box"></div>
</div>
<script>


  function Mover(title) {
    this.obj = title;
    this.startx = 0;
    this.starty;
    this.startLeft;
    this.startTop;
    this.mainDiv = title.parentNode;
    var that = this;
    this.isDown = false;
    this.movedown = function (e) {
      e = e ? e : window.event;
      if (!window.captureEvents) {
        this.setCapture();
      } //事件捕獲僅支持ie
//      函數(shù)功能：該函數(shù)在屬于當(dāng)前線程的指定窗口里設(shè)置鼠標(biāo)捕獲。一旦窗口捕獲了鼠標(biāo)，
//      所有鼠標(biāo)輸入都針對該窗口，無論光標(biāo)是否在窗口的邊界內(nèi)。同一時刻只能有一個窗口捕獲鼠標(biāo)。
//      如果鼠標(biāo)光標(biāo)在另一個線程創(chuàng)建的窗口上，只有當(dāng)鼠標(biāo)鍵按下時系統(tǒng)才將鼠標(biāo)輸入指向指定的窗口。
//      非ie瀏覽器 需要在document上設(shè)置事件
      that.isDown = true;
      that.startx = e.clientX;
      that.starty = e.clientY;

      that.startLeft = parseInt(that.mainDiv.style.left);
      that.startTop = parseInt(that.mainDiv.style.top);
    }
    this.move = function (e) {
      e = e ? e : window.event;
      if (that.isDown) {
        that.mainDiv.style.left = e.clientX - (that.startx - that.startLeft) + "px";
        that.mainDiv.style.top = e.clientY - (that.starty - that.startTop) + "px";
      }
    }
    this.moveup = function () {
      that.isDown = false;
      if (!window.captureEvents) {
        this.releaseCapture();
      } //事件捕獲僅支持ie
    }
    this.obj.onmousedown = this.movedown;
    this.obj.onmousemove = this.move;
    this.obj.onmouseup = this.moveup;

    //非ie瀏覽器
    document.addEventListener("mousemove", this.move, true);
  }
  var mover = new Mover(document.getElementById("title"));


  //寫兩個是為了解決 ie 和非ie 瀏覽器關(guān)于事件捕獲 的兼容性問題


</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站標(biāo)題：JS+DIV實現(xiàn)拖動效果
文章源于：http://jinyejixie.com/article14/iehdge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

JS+DIV實現(xiàn)拖動效果