Vue 모듈 드래그 앤 드롭 효과 구현 코드

이 글의 내용은 vue 모듈의 드래그 앤 드롭 효과 구현 코드에 관한 것입니다. 참고할 만한 가치가 있으니 참고하시면 도움이 될 것입니다.

저번 인터뷰에서 드래그 앤 드롭 효과 구현에 대한 질문을 받은 적이 있었습니다

인터뷰에서는 구현 방법과 논리에 대해서만 간단하게 답변했습니다.

이제 할게 없어서 이걸 구현해봤습니다.

원리는 매우 간단하고 작성하기 매우 편리합니다.

데이터 기반 배열 생성, 배열의 초기 길이는 1

드래그가 트리거되면 객체가 배열에 추가되고 아래 첨자 0이 있는 객체가 드래그되고 새 객체는 여전히 위치에 배치됩니다. 원래 위치로 돌아가 다음 드래그 시간을 기다립니다.

말할 것도 많지 않습니다. 코드는 다음과 같습니다.

<template>
    <div>
      <div @mousedown="move($event,index)" v-for="(x,index) in i">
        <span v-if="index+1 !== i.length">{{index+1}}</span>
        <input v-model="x.input">
      </div>
      {{i}}
    </div>
</template>

<script>
    export default {
        name: "index",
      data(){
          return{
            positionX:0,
            positionY:0,
            i:[
              {input:''}
            ]
          }
      },
      methods:{
          move(e,x){
            let odiv = e.target;        //获取目标元素
            //算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            let flag = true;
            document.onmousemove = (e)=>{       //鼠标按下并移动的事件
              if(flag && x === this.i.length-1){
                flag = false;
                this.i.push({input:''})
              }
              //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
              let left = e.clientX - disX;
              let top = e.clientY - disY;
              //绑定元素位置到positionX和positionY上面
              this.positionX = top;
              this.positionY = left;
              //移动当前元素
              odiv.style.left = left + 'px';
              odiv.style.top = top + 'px';
            };
            document.onmouseup = (e) => {
              document.onmousemove = null;
              document.onmouseup = null;
            };
          }
      }
    }
</script>

<style scoped>
  .view{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f8f8f8;
    .x{
      width: 250px;
      height: 50px;
      top: 50px;
      left: 10px;
      position: absolute;
      background: red;
      color: yellow;
    }
  }
</style>

길이를 드래그하여 이벤트를 트리거하는 등 나중에 사용하면 풍성해질 수 있는 간단한 데모입니다.

입력은 하위 구성 요소로 대체될 수 있습니다. 여기서는 하위 수준 구현 방법을 제공합니다.

입력은 하위 구성 요소로 대체될 수 있습니다. 공유할 저수준 구현 방법은 다음과 같습니다

위 내용은 Vue 모듈 드래그 앤 드롭 효과 구현 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!