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

更新時間：2020年02月11日 08:16:22 作者：geekzsp

這篇文章主要為大家詳細介紹了JS+DIV實現(xiàn)拖動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

效果圖

思路

代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="main" style="background-color: aqua;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px">
  <div id="title" style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></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" style="background-color: aqua;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px">
  <div id="title"
     style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: