vue3实现拖拽移动位置，拖拽过程中鼠标松开后元素还吸附在鼠标上并随着鼠标移动

发现问题

拖拽元素移动的时候，偶尔会出现拖拽过程中鼠标松开后元素还吸附在鼠标上并随着鼠标移动，要再按一下元素才会被放置下来。但是有时就正常。

问题分析

出现该问题的原因是：这个过程会触发H5原生的拖拽事件，并且不会监听到onmouseup，从而导致鼠标松开也能够拖拽。

应该阻止h5的拖拽事件：

document.ondragstart = function(ev) {
	ev.preventDefault();
};
document.ondragend = function(ev) {
    ev.preventDefault();
};

在相应的位置添加这2个函数即可。

let move = false;
function mousedown(event, c, type, cells) {
  tmp = c;
  if (type === vqEnums.funcType.Condition) {
    if (
      (c.Index === props.conditions.length - 1 &&
        c.Index - 1 >= 0 &&
        props.conditions[c.Index - 1].FuncType === vqEnums.funcType.Logic) ||
      (c.Index - 1 >= 0 &&
        props.conditions[c.Index - 1].FuncType === vqEnums.funcType.Logic &&
        c.Index + 1 <= props.conditions.length - 1 &&
        props.conditions[c.Index + 1].AggregateFunc)
    ) {
      tmpLogicType = props.conditions[c.Index - 1].LogicType;
    }
  }
  if (event.shiftKey && event.which === 1) {
    cellClick(event, c, cells);
  } else if (event.which === 1 && !event.ctrlKey && !event.shiftKey) {
    if (
      c.FuncType === vqEnums.funcType.Logic ||
      c.FuncType === vqEnums.funcType.Bracket
    )
      return;
    let _target = $(event.target).hasClass('c-icon')
      ? $(event.target)[0].parentNode
      : event.target;
    let cell = c;
    let startx = event.x - _target.getBoundingClientRect().x;
    let starty = event.y - _target.getBoundingClientRect().y;
    let scrolly = $(_target).parent().scrollTop();
    let cx = _target.getBoundingClientRect().x;
    let cy = _target.getBoundingClientRect().y;
    let ww = document.documentElement.clientWidth;
    let wh = window.innerHeight;

    let tWidth = _target.getBoundingClientRect().width;
    let w = tWidth + 8;
    if ($(_target).hasClass('cell-margin')) {
      w += 20;
    }

    const length = $(_target).next().length;
    if (length > 0) {
      if (
        _target.getBoundingClientRect().y ==
        $(_target).next()[0].getBoundingClientRect().y
      ) {
        $(_target)
          .next()
          .css({ marginLeft: w + 'px' });
      }
      $(_target).css({
        position: 'fixed',
        top: _target.getBoundingClientRect().y - 2,
        left: _target.getBoundingClientRect().x,
        'z-index': 999
      });
    } else {
      $(_target).css({
        // position: 'fixed',
        top: _target.getBoundingClientRect().y - 2,
        left: _target.getBoundingClientRect().x,
        'z-index': 999
      });
    }

    $(_target).siblings().css({ transition: 'margin 0.3s' });
    $(_target).removeClass('cell-margin');

    document.onmousemove = function (ev) {
      if (
        ev.clientY < 0 ||
        ev.clientX < 0 ||
        ev.clientY > wh ||
        ev.clientX > ww
      ) {
        mouseup(event, c, type);
        return false;
      }
      if (
        Math.abs(ev.screenX - event.screenX) >= 5 ||
        Math.abs(ev.screenY - event.screenY) >= 5 ||
        move
      ) {
        if (
          Math.abs(event.x - ev.x) < 2 ||
          (Math.abs(event.y - ev.y) < 2 && !move)
        ) {
          move = false;
          return false;
        }
        if (length == 0) {
          $(_target).css({
            position: 'fixed'
          });
        }
        move = true;
        let endx = ev.x - cx - startx;
        let endy = ev.y - cy - starty; // - scrolly
        let siblings = Array.from($(_target).siblings());
        let cells =
          type === vqEnums.funcType.Out
            ? props.outs
            : type === vqEnums.funcType.Condition
            ? props.conditions
            : props.sorts;
        setTransform(ev, _target, siblings, cell, cells, tWidth, scrolly);
        _target.style.transform = 'translate(' + endx + 'px,' + endy + 'px)';
      }
    };
    document.ondragstart = function (ev) {
      ev.preventDefault();
    };
    document.ondragend = function (ev) {
      ev.preventDefault();
    };
  }
}