实现方式:使用自定义指令可以实现多个面板拖拽互不影响
1.自定义指令 js
directives: {// 拖拽drag(el) {el.onmousedown = function (e) {let x = e.pageX - el.offsetLeftlet y = e.pageY - el.offsetTopdocument.onmousemove = function (e) {el.style.left = e.pageX - x + 'px'el.style.top = e.pageY - y + 'px'}//鼠标抬起事件document.onmouseup = function () {document.onmousemove = null}}}},
2.html
// 想拖动那个标签就在那个标签上面绑定 自定义指令 v-drag<div class="box" v-drag><div>按住拖拽</div></div>
3.css
.box {height: 300px;width: 300px;background-color: #ccc;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;
}
按住就可以随便拉