Vue を使用してドラッグアンドドロップ効果を実装する方法-jsチュートリアル-php.cn

Vue を使用してドラッグアンドドロップ効果を実装する方法

php中世界最好的语言

リリース： 2018-06-01 17:44:38

オリジナル

2610 人が閲覧しました

今回は、Vue を使用してドラッグアンドドロップ効果を実現する方法を説明します。Vue を使用してドラッグアンドドロップ効果を実現する場合の注意事項について説明します。以下は実際のケースです。

レンダリング

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

ドラッグ効果を作りたいときは、これらの属性の違いを区別する必要があります。マウスクリックのオフセット値を計算します。ドラッグ効果を継続する前に、それを理解する必要があります。

clientY は、表示されているページの左上隅からの距離を指します。

pageY は、表示されているページの左上隅からの距離を指します。ページスクロールの影響を受けません)
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>
<body>
  <p id="app" @mousedown="move">    <!--绑定按下事件-->
    {{positionX}}
    {{positionY}}
  </p>
</body>
//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>
<body>
  <p id="app" v-drag>    <!--实现用指令形式实现拖拽效果-->
    
  </p>
</body>
//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 サイトの他の関連記事に注目してください。

推奨読書:

Node.js ファイルのエンコード形式の変換方法の概要

WeChat ミニプログラムにカスタマーサービスボタンを追加する方法

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