在前端项目里创建一个可以全局拖动的按钮菜单栏

引言

在这个日新月异的互联网时代，前端技术和框架如同潮水般不断涌来，但市场上的技术框架满足不了极小重的需求；今天我们要讲的需求是创建一个可以全局拖动的按钮菜单栏。准备好了吗？

整体架构流程

我们使用原生的鼠标的原生事件 mousemove 和mouseup, 监听这两个事件，并计算对应的高度和宽度即可。

页面部分

    <div style="user-select: none;position: relative">
          <div id="draggableOuter"
          class="draggable-button"
          :style="{ top: `${buttonTop}px`, left: `${buttonLeft}px` }"
          @mousedown="startDrag" @click="handleClick"
          >
          <div id="nonDraggableInner"
               class="dropdown" :style="{ top: `${dialogTop}px`, left: `${dialogLeft}px` }"
               v-show="showDropdown"
               @click.stop="handleDropdownClick"
          >
              <ul>
                  <li @click="selectOption">菜单一</li>
              </ul>
          </div>
          </div>

      </div>

相关函数

data(){
   
	return {
   
	    dragging: false,
      startX: 0,
      startY: 0,
      buttonTop: 0,
      buttonLeft: 0,