Vue プロジェクトは div ドラッグ コンポーネントをカプセル化して div ドラッグを実現します

シナリオ: PC 側のプロジェクトでは、ポップアップ ボックスの後に、コンピューター上で複数のフォルダーを開いているのと同じように、複数のページが重なる場面に遭遇します。このとき、2 つのフォルダーの内容を表示したい場合は、ページを完全に同時に移動すると、ページをドラッグして場所を変更できます

多くのチュートリアルでは、単一コンポーネントで使用されるカスタム メソッドが使用されていますが、この記事では、Vue プロジェクトで div をドラッグ アンド ドロップするメソッドをカプセル化し、グローバルに使用できるように登録します。

実装手順:

1. src の util フォルダーにドラッグ エフェクトを実装するためのコードを保存するために、drag.js ファイルを作成します。

export default (Vue) => {
  Vue.directive("drags", {
    inserted: function (el) {
      let oDiv = el   // 获取当前元素
      oDiv.onmousedown = (e) => {
        // 算出鼠标相对元素的位置
        let disX = e.clientX - oDiv.offsetLeft
        let disY = e.clientY - oDiv.offsetTop
        document.onmousemove = (e) => {
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX
          let top = e.clientY - disY
          oDiv.style.left = left + 'px'
          oDiv.style.top = top + 'px'
        }
        document.onmouseup = (e) => {
        document.onmousemove = null
       document.onmouseup = null
        }
      }
    }
  })
}

2. main.jsにメソッドを登録

import directives from './util/derectives'

Vue.use(directives)

3. 使用する場合は、ドラッグする必要がある div タグに直接 v-drag を追加するだけです。別途導入する必要はありません。

<div v-drag></div>

この時点で、Vue で div ドラッグを実装する手順は終了です。必要な友人は、ぜひ試してみてください。