vue項目：點擊拖拽盒子；移動盒子；

代碼可直接復制：（注意需要在移動的盒子上添加 v-指令 注意采用固定定位）

<template><div class="far_box"><div>{{ msg }}</div><!-- v-drag指令 --><div v-drag class="move_box">目標盒子</div></div></template><script> export default {// 指令directives: {drag (el) {// console.log('el', el)// 鼠標移動到目標盒子上--監聽鼠標按下事件el.onmousedown = function (e) {// console.log('e1', e)// 計算出此時點擊目標盒子 相對于自己的左上角距離（目的是為了下方位移時候 賦值減去相應的自己左上角位置 保證盒子定位點還是自己點擊的點 而不是左上角點）// vue項目對于原生的dom操作 其實就是在方法內 也就是js內 使用原生的方法對元素進行dom操作 和普通的js操作一樣var disx = e.offsetXvar disy = e.offsetYdocument.onmousemove = function (e2) {var move_box = document.getElementsByClassName('move_box')[0]move_box.style.position = 'fixed'move_box.style.left = e2.clientX - disx + 'px'move_box.style.top = e2.clientY - disy + 'px'// console.log('最后的定位：', e2.clientX - disx, e2.clientY - disy, e2)}document.onmouseup = function () {document.onmousemove = document.onmouseup = null}}}},data () {return {msg: '其他盒子元素'}}} </script> <style lang="less" scope> .far_box {.move_box {position: fixed;top: 0;left: 0;background-color: #1fff;width: 100px;height: 50px;line-height: 50px;}.move_box:active {background-color: #1f1f;} } </style>

總結

以上是生活随笔為你收集整理的vue项目通过directives指令实现vue实现盒子的移动；vue拖拽盒子；vue移动；的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。