Vue はドラッグ アンド ドロップ効果を実装します (コード付き)

今回は、Vue でドラッグ アンド ドロップ エフェクトを実装する方法 (コード付き) を紹介します。Vue でドラッグ アンド ドロップ エフェクトを実装する際の 注意点 について、実際のケースを見てみましょう。

レンダリング

demo1.gif

クライアントYページYスクリーンYレイヤーYオフセットYの違いを明確にする

ドラッグ効果を作りたいとき、これらの属性の違いを区別する必要があり、これにはいくつかの属性が使用されますドラッグ効果を実現する前に、マウス クリックのオフセット値を計算する必要があります。

clientY は、表示されているページの左上隅からの距離を指します。表示されているページの左上隅からの距離 (ページのスクロールの影響を受けません)
screenY は画面の左上隅からの距離を指します
layerY は画面の最も近い左上隅までの距離を指します またはその親要素
offsetY は親要素からの距離を指します 左上隅からの距離
絵を見ると簡単に理解できます

違い

これらの属性を簡単に理解した後、次のことが起こります。区別する必要があるいくつかの属性。

相違点clientYページの左上隅からの距離ページスクロールの影響pageYページの左上隅からの距離影響なしページスクロールによる

類似点

同じ点相違点layerY要素の位置の影響を受ける最初の位置決めは要素offsetYの左上隅から要素の左上隅までの距離は、この要素の左上隅を基準として計算されます。位置決め問題を解決し、内部交点を計算します。これはの固有の属性です

	IEブラウザ

layerYとoffsetYの違い

ドラッグアンドドロップ機能を実装します

これらのoffset属性の意味を理解したところで、次は私たちの焦点に入ります。早速、コードに進みましょう

// darg.html

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*设置一下背景*/
  }
</style>

  <p>    <!--绑定按下事件-->
    {{positionX}}
    {{positionY}}
  </p>

//main.js
let app = new Vue({
  el:'#app',
  data:{
    positionX:0,
    positionY:0,
  },
  methods:{
    move(e){
      let op = e.target;    //获取目标元素
      
      //算出鼠标相对元素的位置
      let disX = e.clientX - op.offsetLeft;
      let disY = e.clientY - op.offsetTop;
      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;  
        let top = e.clientY - disY;
        
        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;
        
        //移动当前元素
        op.style.left = left + 'px';
        op.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }  
  
  },
  computed:{},
});

もちろん、これをカスタム コマンドとしてバインドして、呼び出しコマンドを使用してドラッグ アンド ドロップ効果を実現できます。はカスタムの定義です 命令を定義するコードです

// darg.html

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*设置一下背景*/
  }
</style>

  <p>    <!--实现用指令形式实现拖拽效果-->
    
  </p>

//main.js
let app = new Vue({
  el:'#app',
  data:{},
  methods:{},
  directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
        let op = el;  //获取当前元素
        op.onmousedown = (e) => {
          //算出鼠标相对元素的位置
          let disX = e.clientX - op.offsetLeft;
          let disY = e.clientY - op.offsetTop;
          
          document.onmousemove = (e)=>{
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX;  
            let top = e.clientY - disY;
           
            //绑定元素位置到positionX和positionY上面
            this.positionX = top;
            this.positionY = left;
        
            //移动当前元素
            op.style.left = left + 'px';
            op.style.top = top + 'px';
          };
          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
});

最後に

この時点で、Vue でドラッグ アンド ドロップ効果を実装しました。ドラッグ アンド ドロップを実装するために 2 つの異なる方法を使用しました。しかし、実際には同じではありません。変更するには、pageY、screenY、clientY、layerY、offsetY などの違いを明確にする必要があります。もちろん、カスタム命令などの Vue のメソッドもいくつか学びました。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue+jquery+lodash スライド時の上部フローティング固定関数の詳細な説明

Vue を使用して PopupWindow コンポーネントを実装する手順の分析

以上がVue はドラッグ アンド ドロップ効果を実装します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。