第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 vanilla js 上拖放鼠標移動腳本

在 vanilla js 上拖放鼠標移動腳本

www說 2023-12-14 15:08:50
我正在編寫一個拖放腳本,用于拖放帶有“.draggable”類的塊。問題是該塊會定期粘在光標上并且不會脫落。如何編輯此腳本,以便可以用鼠標拖動所有具有“.draggable”類的塊而不會出現此問題?let elements = document.querySelectorAll('.draggable');elements.forEach(function(el) {  let mover = false,    x, y, posx, posy, first = true;  el.onmousedown = function() {    mover = true;  };  el.onmouseup = function() {    mover = false;    first = true;  };  el.parentNode.onmousemove = function(e) {    el.style.cursor = "move";    if (mover) {      if (first) {        x = e.offsetX;        y = e.offsetY;        first = false;      }      posx = e.pageX - x;      posy = e.pageY - y;      el.style.left = posx + 'px';      el.style.top = posy + 'px';    }  }});.draggable {  position: absolute;  z-index: 1;  top: 100px;}<section class="dragscroll">  <div class="draggable">    <textarea></textarea>   </div></section><section class="dragscroll">  <div class="draggable">    <textarea></textarea>  </div></section>
查看完整描述

1 回答

?
DIEA

TA貢獻1820條經驗 獲得超2個贊

很難說這有效,因為它很難產生錯誤,所以請讓我知道這有效。我所做的只是


document.addEventListener("mouseup", function() {

    mover = false;

    first = true;

  });

let elements = document.querySelectorAll('.draggable');


elements.forEach(function(el) {

  let mover = false,

    x, y, posx, posy, first = true;

  el.onmousedown = function() {

    mover = true;

  };

  document.addEventListener("mouseup", function() {

    mover = false;

    first = true;

  });

/*

  document.onmouseup = function() {

    mover = false;

    first = true;

  };

*/

  el.parentNode.onmousemove = function(e) {

    el.style.cursor = "move";

    if (mover) {

      if (first) {

        x = e.offsetX;

        y = e.offsetY;

        first = false;

      }


      posx = e.pageX - x;

      posy = e.pageY - y;

      el.style.left = posx + 'px';

      el.style.top = posy + 'px';

    }

  }

});

.draggable {

  position: absolute;

  z-index: 1;

  top: 100px;

}

<section class="dragscroll">

  <div class="draggable">

    <textarea></textarea>

   </div>

</section>


<section class="dragscroll">

  <div class="draggable">

    <textarea></textarea>

  </div>

</section>


查看完整回答
反對 回復 2023-12-14
  • 1 回答
  • 0 關注
  • 131 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號