Vue를 사용하여 DIV 드래그 앤 드롭 만들기

php中世界最好的语言
풀어 주다: 2018-06-06 10:06:44
원래의
5396명이 탐색했습니다.

이번에는 Vue를 사용하여 DIV 드래그 앤 드롭을 할 때 주의 사항에 대해 소개하겠습니다. 다음은 실제 사례입니다.

렌더링:

HTML 코드:

<p id="box">                           
  位置
  <br>x:{{val.x}} <br>y:{{val.y}}
  <p v-drag="greet" id="drag" :style="style">
  //注意这里要通过指令绑定函数将当前元素的位置数据传出来
  </p>
</p>
로그인 후 복사

JS 코드:

Vue.directive('drag',//自定义指令                   
    {bind:function (el, binding) {
        let op = el;  //当前元素
        let self = this; //上下文
        op.onmousedown = function (e) {
         //鼠标按下,计算当前元素距离可视区的距离
          let disX = e.clientX - op.offsetLeft;
          let disY = e.clientY - op.offsetTop;
          document.onmousemove = function (e) {
           //通过事件委托,计算移动的距离 
            let l = e.clientX - disX;
            let t = e.clientY - disY;
           //移动当前元素 
            op.style.left = l + 'px';
            op.style.top = t + 'px';
             //将此时的位置传出去
            binding.value({x:e.pageX,y:e.pageY})
          };
          document.onmouseup = function (e) {
          
            document.onmousemove = null;
            document.onmouseup = null;
           };
        };
      }
    }
  );
  window.onload = function () {
    let vm = new Vue({
      el: '#box',
      data: {
        val: '123',
        style: {
          width: '100px',
          height: '100px',
          background: 'aqua',
          position: 'absolute',
          right: '30px',
          top: 0
        }
      },
      methods:{
      //接受传来的位置数据,并将数据绑定给data下的val
        greet(val){
          vm.val = val;
        }
      } ,
   });
  }
로그인 후 복사

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

추천 도서:

Vue 파일을 구문 분석하는 방법

React는 싱글톤 구성 요소를 구현합니다(코드 포함)

위 내용은 Vue를 사용하여 DIV 드래그 앤 드롭 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!