移動端實現拖動操作

近期有個專案需求，需要用到拖動事件。由於不需要考慮ie8等低端瀏覽器的相容性，所以想到html5中的drag事件，但是發現移動端android & ios並不支援drag事件。所有新事物的產生都不是偶然，所以決定自己去實現乙個頁面元素的拖動。

實現頁面元素的主要思路，是通過監聽事件（touchstart）判斷要拖動的元素並定位該元素；然後監聽移動事件（touchmove）判斷手指移動的方向距離並將這些引數轉換為元素的移動方向距離，通過transform（當然也可以通過定位top&left等）移動元素；當然有開始就有停下來，所以還要監聽結束（touchend）事件，在結束的時候進行相應的處理，返回初始位置，或者停在結束的位置。

現在整體思路有了，然後就是一步步的實現。

源**檔案

demo （請在移動端開啟或者模擬移動端開啟）

手機請掃

就像蓋房子需要打地基一樣，寫程式實現乙個功能需要初始化。

初始化主要是對傳入引數處理，然後做一些基本定義。在這裡實現的拖動操作，以將頁面元素拖入垃圾箱為背景來進行一系列的操作。

首先，我們需要定義可操作的元素，即需要被拖動的元素。接下來就是對可操作元素進行操作，這裡需要繫結事件，也就是touch事件，包括touchstart/touchmove/touchend。在對應的事件內進行相應的操作，從而完成拖動

初始化之後，我們就需要對可操作元素進行事件的繫結，

先上**，以下分別是對應touch事件以及對應的操作

drag.prototype.touchstart = function(e) 
drag.prototype.touchmove = function(e) 
drag.prototype.touchend = function(e)

注：以上**是基於將元素拖入垃圾箱的相應事件函式，可根據自己專案情況進行調整，這裡提供思路。

有了事件監聽，探知了我們手指觸控、移動、抬起等，我們要將對應的操作實現到頁面內的元素，便需要乙個移動元素的操作，便是上邊的setmove函式（以下方法使用前確定你的瀏覽器支援）

drag.prototype.setmove = function(e, type) 
e.style.csstext += 'position: absolute;-webkit-transform: translate('+x+'px,'+y+'px);';
}

沒錯就是簡單粗暴的調整css來實現移動元素

當然再加上驗證元素是否越界（這個界限根據自己情況指定，可以在自己設定的乙個盒模型內，也可以是整個螢幕，根據自己情況而定，這裡不貼**）

因為我這裡有個垃圾桶，所以需要判斷拖動元素是否落入垃圾桶，然後進行後續操作

drag.prototype.checkpos = function(type, e)  else 
} else 
}}

致此整個移動過程都已實現

此處只是指出思路，具體執行過程根據自己的專案情況進行相應的調整

移動端實現拖動操作

移動端拖動元素

移動端拖動元素

VUE 移動端div拖動demo

移動端實現拖動操作

移動端拖動元素

移動端拖動元素

VUE 移動端div拖動demo

相關推薦