JS+DIV實(shí)現(xiàn)拖動(dòng)效果

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

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

效果圖

JS+DIV實(shí)現(xiàn)拖動(dòng)效果

思路

JS+DIV實(shí)現(xiàn)拖動(dòng)效果

代碼

<!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)移動(dòng)
  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)松開(kāi)
  function moveup(){
    isDown=false;
  }
  titleDiv.οnmοusedοwn=movedown;
  titleDiv.οnmοusemοve=move;
  titleDiv.οnmοuseup=moveup;
</script>
</body>
</html>

優(yōu)化(封裝，以及解決拖動(dòng)問(wè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>


  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)前線(xiàn)程的指定窗口里設(shè)置鼠標(biāo)捕獲。一旦窗口捕獲了鼠標(biāo)，
//      所有鼠標(biāo)輸入都針對(duì)該窗口，無(wú)論光標(biāo)是否在窗口的邊界內(nèi)。同一時(shí)刻只能有一個(gè)窗口捕獲鼠標(biāo)。
//      如果鼠標(biāo)光標(biāo)在另一個(gè)線(xiàn)程創(chuàng)建的窗口上，只有當(dāng)鼠標(biāo)鍵按下時(shí)系統(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"));


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


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

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

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

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

廣告

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

成都app開(kāi)發(fā)公司