使用vue的都知道vue有一個自定義指令，我比較喜歡的就是拖拽的自定義指令，感覺挺方便的！

//組件內的拖拽指令 directives: {//組建內自定義指令drag: {// 指令的定義bind: function(el, value) {let oDiv = el; //當前元素let self = this; //上下文oDiv.ontouchstart = function(e) {//鼠標按下，計算當前元素距離可視區的距離let disX = e.touches[0].clientX - oDiv.offsetLeft;let disY = e.touches[0].clientY - oDiv.offsetTop;oDiv.style.zIndex = 3;document.ontouchmove = function(e) {//通過事件委托，計算移動的距離let l = e.touches[0].clientX - disX;let t = e.touches[0].clientY - disY;//移動當前元素// oDiv.style.left = l + 'px';document.ontouchend = function(e) {oDiv.style.zIndex = 2;}document.ontouchmove = null;document.ontouchend = null;};};}}} //大致的框架就是這樣其中el指的是綁定的元素，value就是傳的值了，

　　用法：

<div v-drag='{data:fills,info:data} '>拖拽</div> <!--{}里面的全部都是傳的參數，對應的就是上面的value-->

　　上面是拖拽指令的寫法及用法，但是這并不是主要內容，當你移動端使用自定義指令的時候，如果你的公司需要兼容各種手機版本以及各種系統版本，那么可能你就需要把他撤掉，我遇到的就是蘋果5s并不支持，如果用自定義的指令，那么他會閃爍，沒有內容，是白屏狀態，所以說，想要用自定義指令的，要考慮考使用環境！

轉載于:https://www.cnblogs.com/ctb-web/p/9360578.html

總結

以上是生活随笔為你收集整理的vue的移动app项目中，自定义拖拽指令的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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