LayaAir拖拽移動物件並吸附 附原始碼

2021-10-03 07:54:16 字數 1764 閱讀 9582

前言：拖拽移動物件是2d休閒小遊戲中常用的乙個功能，典型代表例如《植物大戰殭屍》中，種植植物的表現形式，拖拽植物卡片種植到相應的地點。今天介紹一下在laya專案中實現這一功能。

該功能實現參照了 ：egret拖拽物件與吸附

思路：在 laya 中實現拖拽物件，需要用到mouse_move事件的監聽，觸控移動觸發mouse_move，此時計算觸控移動的大小，讓拖拽物件也進行相應的移動。

演示：

開發：

首先建立乙個頁面，頁面上擺放好目標格仔。我這邊擺了9個，編號分別是panel_00 ~panel_08。然後動態載入出來我們要拖拽的材料：

initui()


}
在拖拽開始的時候，在材料的位置例項化出來乙個同樣的材料物件，並且將座標轉化為世界座標，並新增監聽事件：

private curtargetobj: productitem;


private storex: number;


//拖拽物件的初始位置x


private storey: number;


//拖拽物件的初始位置y


private pointx: number =


100;


//吸附點座標x


private pointy: number =


100;


//吸附點座標y


public


instantiatepro


(obj: productitem, e)


private


inittargetobjbindevent()


private xtouch: number;


private ytouch: number;


private


onmovebegin


(e):


void
在拖拽的過程中讓例項化出來的物件跟隨滑鼠（手指）的移動而移動：

private


onmoving


(e):


void
當移動到適當的位置後鬆開滑鼠（手指），物件會搜尋最近的格仔所在的位置，並以緩動動畫的形式吸附過去，如果停止的位置距離目標區域差距過大，則回到起始的位置，並自動銷毀。

private


onmoveend()


:void);


}else


}this


.pointx =


this


["panel_0"


+ closepoint]


.x +50;


// 相對於目前的模組居中


this


.pointy =


this


["panel_0"


+ closepoint]


.y;}


laya.tween.


to(self.curtargetobj,


,400


, laya.ease.cubicout)


;}
這裡計算距離的公式實際上就是求兩點之間直線距離的公式：

最後送上整個專案的打包原始碼：

layaair拖拽移動物件並吸附原始碼

滑鼠拖拽改變物件的屬性，滑鼠拖拽DIV移動

常用document.onmousemove做的一些事情 the time of writing 2013 4 11 written by 吳志強 window.onload function else mousemove odiv1,left top ev,function 滑鼠拖動時執行函式 f...

Java swing拖拽移動元件

首先構造自己的元件，如.component extends jcomponents 在裡面新增拖拽方法 dragsource dragsource dragsource.getdefaultdragsource dragsource.createdefaultdraggesturerecognize...

移動端拖拽模型

移動端的拖拽製作原理和 pc 端思路是一樣的。都是通過各自的api獲取事件的位置，然後求差，通過絕對定位來改變元素的位置。寫前了解 移動端的三個事件touchstart touchmove touchend 分別對應移動端手指按下，移動，抬起。三個事件必須使用 dom 二級新增監聽。其中前兩個事件對...