手機上會偶爾用到拖動div的效果，雖然我自己還沒遇到，先寫乙個以防萬一，需要註明的是，具體實現**是我在網上找的，但是那個**存在一些問題，我又蒐集了其他資料對其修改，達到了現在的樣子，所以還是要感謝寫這段**的大神與萬能的搜尋引擎
1、分享**
html**
scss**
.main
}
效果圖
效果呢就是你可以在螢幕範圍內自由拖動藍色色塊，不過超出螢幕區域我特意做了限制，不需要限制的可以自己改
js**
export default ,
top: 0,
left: 0,
width: window.innerwidth || document.documentelement.clientwidth || document.body.clientwidth,
height: window.innerheight || document.documentelement.clientheight || document.body.clientheight}},
methods:
this.position.x = touch.clientx
this.position.y = touch.clienty
this.position.left = refs.left
this.position.top = refs.top
},move ()
const xpum = this.position.left + touch.clientx - this.position.x
const ypum = this.position.top + touch.clienty - this.position.y
this.left = xpum
this.top = ypum
this.banout()
// 阻止頁面的滑動預設事件
document.addeventlistener('touchmove', function () , )}},
end () ,
banout () else if (this.left > this.width - refs.width)
if (this.top < 0) else if (this.top > this.height - refs.height) }}}
Vue小Demo，仿lofter移動端
vue2.0全家桶 axios vuex mint ui mock.js stylus 預覽位址 pc端建議在chrome下開啟除錯模式或移動端瀏覽 原始碼位址 求你的小星星 歷時半個多月的敲 過程，終於完成了這款仿lofter的專案，通過這個專案熟悉了對vue2.0的使用，在專案中使用vuex的狀...
移動端拖動元素
1，先獲取當前手機觸控到的座標值 2，拖動原理 手指移動中，計算出手指移動的距離。然後用盒子原來的位置 手指移動的距離 3，手指移動的距離 手指滑動中的位置 減去 手指剛開始觸控的位置 var div document.queryselector div var startx 0 獲取手指觸控初始座...
移動端拖動元素
1.touchstart touchmove touchend可以實現拖動元素 但是拖動元素需要當前手指的座標值我們可以使用targettouches 0 裡面的pagex和pagey 3.移動端拖動的原理 手指移動中，計算出手指移動的距離。然後用盒子原來的位置 手指移動的距離 4.手指移動的距離 ...