前言?

小程序開發提供了豐富的API和事件處理函數，使得開發者可以方便地實現各種交互功能。其中，拖拽功能是一個在許多應用場景中常見的需求，例如拖拽按鈕、拖拽圖片等。本文將介紹一個小程序頁面中實現拖拽移動元素的功能的代碼示例，并解析其實現原理。

js?

這段代碼主要是一個小程序頁面中實現了拖拽移動元素的功能。具體解釋如下：

getSysdata?函數：該函數使用?wx.getSystemInfo?方法獲取系統的相關信息，如窗口寬度和高度，并將其存儲到?that.data.window?數組中。之后根據一定的比例計算出一個定位值?write，再通過?that.setData?方法將?write?設置為頁面的數據，在回調函數中使用?wx.createSelectorQuery?方法獲取元素的寬度和高度，存儲到?that.data.writesize?數組中。
touchmove?函數：該函數是拖拽過程中觸發的事件處理函數。通過獲取觸摸點的坐標減去元素寬度和高度的一半，再減去頁面的滾動距離，得到當前元素的位置。然后判斷該位置是否超出屏幕范圍，如果超出則將位置設置為邊界值。最后通過?that.setData?方法將最新的位置信息存儲到頁面數據中。
onPageScroll?函數：該函數用于監聽頁面滾動事件，并將滾動距離存儲到?this.data.scrolltop?中。
touchend?函數：該函數是拖拽結束時觸發的事件處理函數。首先獲取當前元素的位置和窗口的寬度、高度以及元素的大小。如果當前位置在屏幕的左、右、上、下邊緣處，則直接返回，不執行回到邊緣的邏輯。否則，通過計算最近的水平邊緣和垂直邊緣的位置，并判斷最近的邊緣是水平邊緣還是垂直邊緣，將元素位置設置為最近邊緣的位置。最后通過?that.setData?方法將最新的位置信息存儲到頁面數據中。

獲取微信小程序中獲取系統信息

這段代碼是一個小程序（微信小程序）中的 JavaScript 代碼段，用于獲取系統信息和元素尺寸，并做一些相關的計算和操作。具體來說，它執行以下操作：

首先，定義了一個函數?getSysdata，這個函數似乎是用來獲取系統信息和元素尺寸的。
在函數內部，通過調用?wx.getSystemInfo?函數來獲取系統信息。這個函數的結果會在?success?回調函數中被處理。
在?success?回調函數中，將獲取到的系統窗口寬高（windowWidth?和?windowHeight）存儲在?that.data.window?數組中。
接下來，根據一定的邏輯計算得到一個名為?write?的數組，其中?write[0]?是系統窗口寬度的某個百分比（that.data.writePosition[0]）以像素為單位的值，而?write[1]?則是系統窗口高度的某個百分比（that.data.writePosition[1]）以像素為單位的值。
使用?that.setData?函數來更新小程序的數據，將?write?數組設置為新的數據。在這里還提供了一個回調函數，在這個回調函數中執行如下操作：
- 使用?wx.createSelectorQuery()?創建一個查詢對象。
- 使用?.select(".kefuBtn")?選擇頁面中類名為?.kefuBtn?的元素。
- 調用?.boundingClientRect?方法獲取該元素的寬度和高度，并將結果存儲在?that.data.writesize?數組中。
- 最后，通過調用?.exec()?執行上述查詢操作。

總之，這段代碼用于在微信小程序中獲取系統信息（窗口尺寸）和特定元素的尺寸，并進行一些相關的計算和操作，可能是為了適應不同尺寸的設備和顯示效果。

getSysdata: function () {var that = this;wx.getSystemInfo({success: function (e) {that.data.window = [e.windowWidth, e.windowHeight];var write = [];write[0] = (that.data.window[0] * that.data.writePosition[0]) / 100;write[1] = (that.data.window[1] * that.data.writePosition[1]) / 100;console.log(write, 45);that.setData({write: write,},function () {// 獲取元素寬高wx.createSelectorQuery().select(".kefuBtn").boundingClientRect(function (res) {console.log(res.width);that.data.writesize = [res.width, res.height];}).exec();});},fail: function (e) {console.log(e);},});},

觸摸移動事件的處理函數

這段代碼是一個用來處理觸摸移動事件的函數。當用戶在頁面上進行觸摸移動操作時，該函數會被觸發。

代碼中的各個部分的功能如下所示：

首先，通過var that = this;將當前上下文的this對象賦值給變量that，以確保在后續的代碼中能夠正確訪問到頁面的數據。
然后，通過e.touches[0].pageX和e.touches[0].pageY獲取當前觸摸點相對于頁面的水平和垂直位置，并將其分別存儲在數組position的第一個和第二個元素中。同時，通過減去寫作框的寬度的一半（that.data.writesize[0] / 2）和減去垂直滾動的偏移量（this.data.scrolltop）來調整寫作框的中心位置。
接下來，通過that.data.window[0]和that.data.window[1]分別獲取屏幕的寬度和高度，以便后續判斷寫作框是否超出屏幕范圍。
使用條件語句判斷寫作框的水平和垂直位置是否超出屏幕范圍。如果水平位置小于0，則將其設為0，以保證寫作框不會超出屏幕左側邊界。如果水平位置大于屏幕寬度減去寫作框寬度，則將其設為屏幕寬度減去寫作框寬度，以保證寫作框不會超出屏幕右側邊界。對于垂直位置，也進行了類似的判斷和限制。
最后，通過that.setData()方法將更新后的寫作框位置應用到頁面上，即將position賦值給write，以使得寫作框顯示在調整后的位置上。

綜上所述，這段代碼的主要功能是根據用戶的觸摸移動操作來調整寫作框的位置，并保證寫作框不會超出屏幕范圍。

  //開始拖拽touchmove: function (e) {var that = this;var position = [e.touches[0].pageX - that.data.writesize[0] / 2,e.touches[0].pageY - that.data.writesize[1] / 2 - this.data.scrolltop,];// 獲取屏幕寬高var windowWidth = that.data.window[0];var windowHeight = that.data.window[1];// 判斷是否超出屏幕范圍if (position[0] < 0) {position[0] = 0;} else if (position[0] > windowWidth - that.data.writesize[0]) {position[0] = windowWidth - that.data.writesize[0];}if (position[1] < 0) {position[1] = 0;} else if (position[1] > windowHeight - that.data.writesize[1]) {position[1] = windowHeight - that.data.writesize[1];}that.setData({write: position,});

觸摸結束事件的處理函數

這段代碼是一個用于處理觸摸結束事件的函數。在移動設備的觸摸屏上，當用戶的手指從屏幕上抬起時，會觸發這個事件。代碼的目的是確保用戶在寫字過程中，當觸摸結束時，字的位置會自動靠近最近的屏幕邊緣。

具體的步驟如下：

通過touchend事件處理函數來執行以下操作。
從事件對象中獲取當前寫字的位置，這個位置信息保存在position變量中。
獲取屏幕的寬度和高度，并將它們分別保存在windowWidth和windowHeight變量中。
獲取寫字區域的尺寸，這個尺寸信息保存在writesize變量中。
如果當前寫字位置已經在屏幕的左、右邊緣或上、下邊緣，那么直接返回，不執行后續的將位置回到邊緣的邏輯。
如果當前寫字位置不在邊緣，那么計算離當前位置最近的水平邊緣和垂直邊緣。
判斷最近的邊緣是水平邊緣還是垂直邊緣，通過比較寫字位置與屏幕中心的距離來決定。
如果最近的邊緣是水平邊緣，將寫字位置的水平坐標設置為最近水平邊緣的值，使得字能夠貼近水平邊緣。
如果最近的邊緣是垂直邊緣，將寫字位置的垂直坐標設置為最近垂直邊緣的值，使得字能夠貼近垂直邊緣。
最后，更新寫字位置的數據，將位置信息設置為回到邊緣后的位置。

總之，這段代碼的作用是確保在用戶停止觸摸屏幕后，寫字位置會自動靠近離它最近的屏幕邊緣，從而使得寫字的體驗更加舒適和方便。

  touchend: function (e) {var that = this;var position = that.data.write;var windowWidth = that.data.window[0];var windowHeight = that.data.window[1];var writesize = that.data.writesize;// 如果位置在屏幕左、右邊緣或上、下邊緣，直接返回，不執行回到邊緣的邏輯if (position[0] === 0 ||position[0] === windowWidth - writesize[0] ||position[1] === 0 ||position[1] === windowHeight - writesize[1]) {return;}// 如果位置不是邊緣，則自動回到最近的邊緣var closestHorizontalEdge =Math.abs(position[0] - windowWidth / 2) < Math.abs(position[0])? windowWidth - writesize[0]: 0;var closestVerticalEdge =Math.abs(position[1] - windowHeight / 2) < Math.abs(position[1])? windowHeight - writesize[1]: 0;// 檢查最近的邊緣是水平邊緣還是垂直邊緣if (Math.abs(closestHorizontalEdge - position[0]) <Math.abs(closestVerticalEdge - position[1])) {position[0] = closestHorizontalEdge;} else {position[1] = closestVerticalEdge;}that.setData({write: position,});},

?用于監聽頁面滾動事件

onPageScroll?函數：該函數用于監聽頁面滾動事件，并將滾動距離存儲到?this.data.scrolltop?中。?

  onPageScroll(e) {this.data.scrolltop = e.scrollTop;},

全局參數?

  data: {// 拖拽參數writePosition: [85, 35], //默認定位參數writesize: [0, 0], // 元素大小window: [0, 0], //屏幕尺寸write: [0, 0], //定位參數scrolltop: 0, //據頂部距離},

html
?

這段代碼是一個 HTML 的按鈕元素，在頁面上顯示為一個按鈕圖標。按鈕具有以下特性和功能：

open-type="contact"：表示按鈕的點擊行為，當點擊按鈕時，會打開客服對話框，用戶可以與客服進行溝通。
bindtouchmove="touchmove"、catch:touchmove：表示當按鈕被觸摸移動時觸發 touchmove 方法，這個方法可能是由程序定義和實現的。
style="left:{{write[0]}}px;top:{{write[1]}}px;"：表示按鈕的定位樣式，left 和 top 樣式用于指定按鈕的水平和垂直位置。{{write[0]}} 和 {{write[1]}} 是可能由程序動態設置的變量。
catch:touchend="touchend"：表示當按鈕觸摸結束時觸發 touchend 方法，這個方法可能是由程序定義和實現的。

<button class='kefuBtn' open-type="contact"  bindtouchmove="touchmove" catch:touchmove style="left:{{write[0]}}px;top:{{write[1]}}px;" catch:touchend="touchend"><image class="kefu" src="../../iimage/kefu.png" />
</button>

CSS

.kefuBtn {position: absolute;background-color: transparent;border: none;outline: none;background: #fff !important;border-radius: 0rpx;padding: 0rpx;margin: 0rpx;display: inline-block;line-height: 1;width: 112rpx !important;height: 112rpx !important;border-radius: 50%;box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15)
}button::after {/*button的邊框樣式是通過::after方式實現的*/border: none;
}.kefuBtn image {width: 112rpx;height: 112rpx;
}