init

src/drag.ts

@@ -2,50 +2,55 @@ export const addDragDemo = (stage: FYGE.Stage) => {
     const PIC_SIZE = 200;//图片尺寸，单位像素s
     const GAP = 2;//位置间隔
 
-    const pictureA = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/aurora/assets/cd16134f2544202ed5676adbd5114286aec44347.png');
-    stage.addChild(pictureA);
+    const picture1 = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/aurora/assets/cd16134f2544202ed5676adbd5114286aec44347.png');
+    stage.addChild(picture1);
 
-    const pictureB = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/aurora/assets/c55dcd277542a6c3e983278ae5835d89848b9bd9.png');
-    stage.addChild(pictureB);
-    pictureB.position.set(PIC_SIZE + GAP, 0)
+    const picture2 = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/aurora/assets/c55dcd277542a6c3e983278ae5835d89848b9bd9.png');
+    stage.addChild(picture2);
+    picture2.position.set(PIC_SIZE + GAP, 0)
 
     //鼠标按下起始点
     let startPoint;
     //图片起始位置
-    let picOriginPos;
+    let currentPictureOrigin;
 
-    const onStageMove = (event: FYGE.MouseEvent) => {
+    const onStageMove = (currentPicture: FYGE.Sprite, event: FYGE.MouseEvent) => {
         //鼠标当前位置
         const currentPoint = { x: event.stageX, y: event.stageY };
         //鼠标按下点到鼠标当前点的偏移量
         let mouseOffsetX = currentPoint.x - startPoint.x;
         let mouseOffsetY = currentPoint.y - startPoint.y;
 
-        pictureA.x = picOriginPos.x + mouseOffsetX;
-        pictureA.y = picOriginPos.y + mouseOffsetY;
+        currentPicture.x = currentPictureOrigin.x + mouseOffsetX;
+        currentPicture.y = currentPictureOrigin.y + mouseOffsetY;
     }
 
-    const onMouseUp_pic = () => {
+    const onMouseUp_pic = (onStageMoveBinded: Function) => {
         //鼠标抬起后应该移出舞台移动事件，否则会重复添加事件
-        stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, this);
+        stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMoveBinded, this);
     }
 
     const onMouseDown_pic = (event: FYGE.MouseEvent) => {
+        const currentPicture = event.target;
+
+        const onStageMoveBinded = onStageMove.bind(this, currentPicture);
         //图片鼠标弹起事件，事件触发一次即移除，否则会重复添加鼠标弹起事件
-        pictureA.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic, this);
+        currentPicture.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic.bind(this, onStageMoveBinded), this);
 
         //添加舞台移动事件，鼠标移动即触发
         //FYGE.MouseEvent.MOUSE_MOVE 会在鼠标移动过程中触发
-        stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, this);
+        stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMoveBinded, this);
 
         //event事件对象
         //event.stageX，event.stageY当前鼠标在舞台的位置
         startPoint = { x: event.stageX, y: event.stageY };
 
-        picOriginPos = { x: pictureA.x, y: pictureA.y };
+        currentPictureOrigin = { x: currentPicture.x, y: currentPicture.y };
+
+        stage.addChildAt(currentPicture, stage.children.length - 1);
     }
 
     //增加鼠标按下事件
-    pictureA.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_pic, this);
-    pictureB.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_pic, this);
+    picture1.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_pic, this);
+    picture2.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_pic, this);
 }