vue floating menu

Vue-Floating-Menu

Preface

As the name suggests, this is a floating menu with drag-and-drop functionality, an open source project.

A floating window component based on vue, which can be freely dragged on the screen. After dragging, it can be adsorbed to both sides of the page according to the final position, and the floating window can be clicked to display the menu.

Attached is the github project address vue-floating-menu

The effect is as follows:

Summary of problems encountered

• The mouse moves too fast, causing the drag to be out of focus:

 < div @mousedown.stop.prevent =" moveStart " @click.stop.prevent =" toggleMenu " > </ div > 

 moveStart ( e ) {
  // ... ...省略号... ...
  // 具体可以在github项目里查看

  document . onmousemove = async ( e ) => {
    this . clickFlag = false ;
    this . moveFlags = true ;
    // ?在这里边处理拖拽时的位置更新,就是因为这个。
    // 我之前是单独通过监听mousemove的方法，所以遇到了这个问题
  } ;
  document . onmouseup = ( ) => {
    document . onmousemove = null ;
    document . onmouseup = null ;
    this . moveEnd ( ) ;
  } ;
} ,

• Determine whether it is a click event:

 < div @mousedown.stop.prevent =" moveStart " @click.stop.prevent =" toggleMenu " > </ div > 

 toggleMenu ( ) {
  //  如果上一次down事件到下一次click事件中 相同即为点击事件
  if ( this . lastMoveIndex == this . curMoveIndex ) {
	//?点击事件
  }
  this . curMoveIndex = this . lastMoveIndex ;
} ,
moveStart ( e ) {
  // ... ...省略号... ...
  // 具体可以在github项目里查看
  document . onmousemove = async ( e ) => {
    this . lastMoveIndex ++ ;
  } ;
  document . onmouseup = ( ) => {
    document . onmousemove = null ;
    document . onmouseup = null ;
    this . moveEnd ( ) ;
  } ;
} , 

Usage

Demo see here: https://vue-floating-menu.netlify.app

• How to add a menu:
  The component src/components/menuPart.vue is a demo for adding a menu

If you think vue-floating-menu is good, remember to give it a thumbs up