js 代码 在methos
// 模块拖拽事件move(e) {let Module = e.target; //获取目标元素let _this = this;//算出鼠标相对元素的位置let disX = e.clientX - Module.offsetLeft;let disY = e.clientY - Module.offsetTop;document.onmousemove = e => {//鼠标按下并移动的事件//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置let left = e.clientX - disX;let top = e.clientY - disY;//绑定元素位置到positionX和positionY上面this.positionX = top;this.positionY = left;//移动当前元素Module.style.left = left + "px";Module.style.top = top + "px";};document.onmouseup = e => {document.onmousemove = null;document.onmouseup = null;};}
<template><div>拍卖会<div class="box"><ul><li  @mousedown="move">item</li></ul><div></div></div></div>
</template>
<style lang="scss" scoped>
li {list-style: none;width: 50px;height: 50px;border: 1px solid #666;background-color: #ccc;/* 使用定位,脱离文档流 */position: relative;left: 10px;top: 20px;/* 鼠标移入变成拖拽手势 */cursor: move;// z-index: 3000;
}
</style>