Vue implements drag and drop small icon

How to write a small floating icon in a vue project, for your reference, the specific content is as follows

first

1. HTML file must give the parent box an ID

<div
      class="xuanfu"
      
      @mousedown="down()"
      @touchstart="down()"
      @="move()"
      @="move()"
      @mouseup="end()"
      @touchend="end()"
    >
      <img class="img-kf" src="../../assets/images/csVip/" />
</div>

2. Set it in data

position: { x: 0, y: 0 },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",

3. Write drag method in the method

//Mobile drag event    down() {
       = true;
      let touch;
      if () {
        touch = [0];
      } else {
        touch = event;
      }
       = ;
       = ;
       = ;
       = ;
    },
    move() {
      if () {
        let touch;
        if () {
          touch = [0];
        } else {
          touch = event;
        }
         =  - ;
         =  - ;
         =  + ;
         =  + ;
        //Add restrictions: Only dragging within the screen is allowed
        //Screen width minus the width and height of the floating frame        const maxWidth =  - 54;
        const maxHeight =  - 54;
        if ( &lt; 0) {
          //Screen x limit           = 0;
        } else if ( &gt; maxWidth) {
           = maxWidth;
        }
        if ( &lt; 0) {
          //Screen Y Limit           = 0;
        } else if ( &gt; maxHeight) {
           = maxHeight;
        }
         =  + "px";
         =  + "px";
        //Stop the page's sliding default event        (
          "touchmove",
          function () {
            // 1.2 If you encounter sliding problems, please pay attention to whether you get touchmove            // (); //jq to stop bubbling events            (); // If jq is not introduced, use stopPropagation()          },
          false
        );
      }
    },
    // Functions when mouse is released    end() {
       = false;
    },

4. CSS style

.xuanfu {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    // background: rgb(213, 91, 91);
    position: fixed;

    bottom: 4rem;
    right: 0.4rem;
    z-index: 9999999999;
    text-align: center;

    .img-kf {
      width: 1.7rem;
      height: 1.7rem;
    }
  }

At this point, our floating icon is finished.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.