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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

在 div 內(nèi)拖動(dòng)元素,但拖動(dòng)時(shí)元素閃爍

在 div 內(nèi)拖動(dòng)元素,但拖動(dòng)時(shí)元素閃爍

暮色呼如 2022-07-01 16:41:32
我正在嘗試在另一個(gè) div 中拖動(dòng)一個(gè)元素,但是在拖動(dòng)時(shí)它會(huì)不斷閃爍。我用這個(gè)沙盒重新創(chuàng)建了問(wèn)題https://codesandbox.io/s/focused-cache-l3yos<template>  <div id="app">    <div id="board" @mousemove="dragOver">      <div        class="draggableItem"        @mousedown="dragStart"        @mouseup="dragStop"        :style="{top: this.top + 'px', left: this.left + 'px'}"      >This should be draggable</div>    </div>  </div></template><script>export default {  name: "App",  data: function() {    return {      isDragging: false,      top: 50,      left: 50    };  },  methods: {    dragOver: function(e) {      if (this.isDragging) {        this.left = e.offsetX;        this.top = e.offsetY;      }    },    dragStart: function(e) {      this.isDragging = true;    },    dragStop: function(e) {      this.isDragging = false;    }  }};</script>
查看完整描述

1 回答

?
幕布斯7119047

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊

您可以將位置計(jì)算為與起始位置的偏移量,然后根據(jù)移動(dòng)進(jìn)行更新。這將允許繪制任何部分。您可以(并且應(yīng)該恕我直言)動(dòng)態(tài)附加和刪除事件處理程序。


這可能是這樣的:


<template>

  <div id="app">

    <div id="board">

      <div

        class="draggableItem"

        @mousedown="dragStart"

        :style="{top: this.top + 'px', left: this.left + 'px'}"

      >This should be draggable</div>

    </div>

  </div>

</template>


<script>

export default {

  name: "App",

  data: function() {

    return {

      isDragging: false,

      top: 50,

      left: 50,

      startTop: 0,

      startLeft: 0

    };

  },

  methods: {

    dragOver: function(e) {

      if (this.isDragging) {

        this.top = e.clientY - this.startTop;

        this.left = e.clientX - this.startLeft;

      }

    },

    dragStart: function(e) {

      window.addEventListener('mousemove', this.dragOver)

      window.addEventListener('mouseup', this.dragStop)

      this.isDragging = true;

      this.startTop = e.clientY - this.top;

      this.startLeft = e.clientX - this.left;

    },

    dragStop: function(e) {

      window.removeEventListener('mousemove', this.dragOver)

      window.removeEventListener('mouseup', this.dragStop)

      this.isDragging = false;

    }

  }

};

</script>


查看完整回答
反對(duì) 回復(fù) 2022-07-01
  • 1 回答
  • 0 關(guān)注
  • 458 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)