满口金牙
2022-07-07 18:36
采纳率: 90.9%
浏览 50
已结题

Vue 拖动菜单上面的 Title , 让菜单移动,不跟手原因,请教

目的: 拖动菜单上面的 Title , 让菜单移动.

问题描述:
1\ 拖动时不很跟手,晃动感. (手和菜单没粘住的感觉)
2 有时鼠标移出了菜单,菜单却没跟过来

3,请教更好的写法
请教问题出在哪**
**


  <div>
        <div class="color-picker-title" @mousedown.left="colorMenuMouseDown($event)">拖动这里</div>
        <div>菜单内容</div>
   </div>

/ 菜单拖动
let initMeunLeft = 0; // 菜单初始位置
let initMenuTop = 0;
let menuDOM: HTMLDivElement; // 整个菜单
let menuBar: HTMLDivElement  // 菜单上面的 div,点击拖动
function colorMenuMouseDown(event: MouseEvent) {
  console.log('1', event)
  initPointX = event.clientX // 鼠标点下的位置
  initPointY = event.clientY
  menuBar = event.target as HTMLDivElement
  menuDOM = menuBar.parentElement as HTMLDivElement // 父元素是整个菜单
  initMeunLeft = menuDOM.offsetLeft
  initMenuTop = menuDOM.offsetTop
  menuBar.addEventListener('mousemove', colorMenuMouseMove) // 给菜单上面的 title 加上 事件
  menuBar.addEventListener('mouseup', colorMenuMouseUp)
}
function colorMenuMouseMove(event: MouseEvent) {
  const moveWidth = event.clientX - initPointX // 移动的距离
  const moveHeight = event.clientY - initPointY // 
  menuDOM.style.left = initMeunLeft + moveWidth + 'px' // 更新菜单的位置
  menuDOM.style.top = initMenuTop + moveHeight + 'px'
  console.log('2', menuDOM)
}
function colorMenuMouseUp(event: MouseEvent) {
  console.log('3', event)
  menuBar.removeEventListener('mousemove', colorMenuMouseMove)
  menuBar.removeEventListener('mouseup', colorMenuMouseUp)
}



  #color-Picker {
    position: absolute;
    top: 100px;
    z-index: 3;

    .color-picker-title {
      background-color: rgb(160, 164, 168);
      &:hover {
        cursor: pointer;
      }
    }
  }
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

相关推荐 更多相似问题