Vue3.0 图标任意拖拽

829 阅读1分钟
 <template>
     <div class="feedback"  @mousedown="drag($event)"  ref="feedbackRef">
                 <span>icon</span>
     </div>
 </template>
 
 <script>
 export default {
  setup(){
   const feedbackRef = ref();
        const drag = (e) => {
              const Left = feedbackRef.value;
              document.onmousemove = function (e) {
                e.preventDefault();
                const distx = e.clientX;
                const disty = e.clientY;
                Left.style.top = disty + "px";
                Left.style.left = distx + "px";
              };
              document.onmouseup = function () {
                document.onmousemove = null;
              };
        };
        return {
          feedbackRef
        }
    }
 }
 </script>