집 > 기사 > 웹 프론트엔드 > Vue는 드래그 앤 드롭 효과를 구현합니다(코드 포함).

Vue는 드래그 앤 드롭 효과를 구현합니다(코드 포함).

php中世界最好的语言원래의: 2018-05-15 11:00:501950검색

이번에는 Vue로 드래그 앤 드롭 효과를 구현하는 방법(코드 포함)을 알려드리겠습니다. Vue에서 드래그 앤 드롭 효과를 구현하기 위한 주의사항은 무엇인가요? .

Rendering

demo1.gif

Clear the Difference between clientY pageY screenY layerY offsetY

드래그 효과를 만들고 싶을 때 이러한 속성의 차이를 구분해야 하는데, 이 여러 속성이 사용됩니다. 마우스 클릭의 오프셋 값을 계산하려면 드래그 효과를 계속해서 이해해야 합니다.

clientY는 표시되는 페이지의 왼쪽 상단 모서리로부터의 거리를 나타냅니다. 보이는 페이지 페이지의 왼쪽 상단으로부터의 거리(페이지 스크롤의 영향을 받지 않음)
screenY는 화면의 왼쪽 상단으로부터의 거리를 나타냅니다.
layerY는 화면의 가장 가까운 왼쪽 상단 모서리까지의 거리를 나타냅니다. 상위 요소
offsetY는 그것으로부터의 거리를 나타냅니다. 왼쪽 상단 모서리로부터의 거리
사진을 보면 쉽게 이해할 수 있습니다

차이

이러한 속성을 간략히 이해한 후에는 다음과 같은 사항이 있습니다. 구별해야 할 몇 가지 속성.

차이clientY페이지 왼쪽 상단으로부터의 거리페이지 스크롤의 영향을 받음pageY페이지 왼쪽 상단으로부터의 거리영향을 받지 않음 페이지 스크롤 기준

유사성

같은 점차이layerY요소의 왼쪽 상단과의 거리 요소의 첫 번째 위치 지정은 이 요소에서 위쪽으로 발견됩니다. 요소offsetY에서 요소의 왼쪽 위까지의 거리는 이 요소의 왼쪽 위를 기준으로 계산됩니다. 위치 문제를 해결하고 내부 교차점을 계산합니다.



		IE 브라우저

layerY와 offsetY의 차이점

드래그 앤 드롭 기능을 구현합니다

이제 오프셋 속성의 의미를 알았으니, 우리의 초점을 입력합니다. 더 이상 고민하지 않고 곧바로 코드로 넘어가겠습니다.

// 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;
          };
        };
      }
    }
  }
});

Finally

이 시점에서 우리는 Vue로 드래그 앤 드롭 효과를 구현했습니다. 하지만 실제로는 동일하지 않습니다. 드레싱을 변경하려면 pageY, screenY, clientY, layerY, offsetY 등의 차이점을 명확히 해야 합니다. 물론 사용자 정의 지침과 같은 Vue의 몇 가지 방법도 배웠습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!