`
pyleaf
  • 浏览: 39149 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

Tile 容器内部拖拽

    博客分类:
  • Flex
 
阅读更多

本例是Flex3 Cookbook 3.27节的内容,需求是要让用户可以在Tile 容器里面拖拽其瓷砖(tile)并且在用户放下瓷砖(tile)的时候容器重组。

书中示例代码如下:

<mx:Tile xmlns:mx="http://www.adobe.com/2006/mxml" width="300"
height="600" direction="horizontal">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private function childStartDrag(event:Event):void
{
(event.currentTarget as UIComponent).startDrag(false,
this.getBounds(stage));
(event.currentTarget as
UIComponent).addEventListener(MouseEvent.MOUSE_UP,
childStopDrag);
(event.currentTarget as
UIComponent).addEventListener(MouseEvent.ROLL_OUT,
childStopDrag);
swapChildren((event.currentTarget as UIComponent),
getChildAt(numChildren-1));
}
private function childStopDrag(event:Event):void
{
swapChildren((event.currentTarget as UIComponent),
hitTestChild((event.currentTarget as UIComponent)));
(event.currentTarget as UIComponent).stopDrag();
this.invalidateDisplayList();
this.invalidateProperties();
}
private function
hitTestChild(obj:UIComponent):DisplayObject
{
for(var i:int = 0; i<this.numChildren; i++)
{
if(this.getChildAt(i).hitTestObject(obj))
{
return getChildAt(i);
}
}r
return getChildAt(0)
}
]]>
</mx:Script>
<mx:Panel title="First Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="First Text"/>
</mx:Panel>
<mx:Panel title="Second Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="Second Text"/>
</mx:Panel>
<mx:Panel title="Third Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="Third Text"/>
</mx:Panel>
<mx:Panel title="Fourth Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="Fourth Text"/>
</mx:Panel>
</mx:Tile>

 

 

本着学习Flex4的原则,将本书中的例子用Flex4控件加以改造,但是运行起来各种问题(事实上,书中的代码在Flex3中运行也是各种问题),最主要是swapChildren方法在Flex4中对应的swapElements方法执行后会自动替换两个控件的位置,导致无法拖拽,若不调用该方法,则顺序靠前的控件在拖拽的过程中会与顺序靠后的控件重叠一部分,导致无法拖放,于是乎开始改造。

使用拖拽代理,可解决控件重叠的问题。本来是想另拖拽源控件隐藏,但是在拖拽失败时候无法重新显示出来,因此暂不考虑。

代码如下:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955"
			   minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.core.BitmapAsset;
			import mx.core.DragSource;
			import mx.core.UIComponent;
			import mx.events.DragEvent;
			import mx.events.FlexEvent;
			import mx.managers.DragManager;

			private var targetElem:UIComponent;

			private function childStartDrag(event:MouseEvent):void {
				var ui:UIComponent = event.currentTarget as UIComponent;
				var proxyBox:BitmapAsset = new BitmapAsset();
				proxyBox.bitmapData = new BitmapData(ui.width, ui.height);
				proxyBox.bitmapData.draw(ui);
				var ds:DragSource = new DragSource();
				ds.addData(ui, "border");
				DragManager.doDrag(ui, ds, event, proxyBox);
			}

			protected function tg_dragEnterHandler(event:DragEvent):void {
				if (event.dragSource.hasFormat("border")) {
					DragManager.acceptDragDrop(event.currentTarget as UIComponent);
				}
			}

			protected function tg_dragDropHandler(event:DragEvent):void {
				var elem:UIComponent = event.dragInitiator as UIComponent;
				if (targetElem && targetElem != elem) {
					tg.swapElements(targetElem, elem);
				}
			}

			protected function tg_creationCompleteHandler(event:FlexEvent):void {
				for (var i:int = 0; i < tg.numElements; i++) {
					tg.getElementAt(i).addEventListener(DragEvent.DRAG_ENTER, elemDragEnter, false, 0, true);
					tg.getElementAt(i).addEventListener(MouseEvent.MOUSE_DOWN, childStartDrag, false, 0, true);
				}
			}

			protected function elemDragEnter(event:DragEvent):void {
				if (targetElem != event.currentTarget) {
					targetElem = event.currentTarget as UIComponent;
				}
			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>

	<s:TileGroup id="tg"
				 dragEnter="tg_dragEnterHandler(event)"
				 dragDrop="tg_dragDropHandler(event)"
				 creationComplete="tg_creationCompleteHandler(event)"
				 x="129"
				 y="58">
		<s:BorderContainer>
			<s:Label text="First Text"/>
		</s:BorderContainer>
		<s:BorderContainer>
			<s:Label text="Second Text"/>
		</s:BorderContainer>
		<s:BorderContainer>
			<s:Label text="Third Text"/>
		</s:BorderContainer>
		<s:BorderContainer>
			<s:Label text="Fourth Text"/>
		</s:BorderContainer>
	</s:TileGroup>
</s:Application>

 

分享到:
评论

相关推荐

    素材_tilemap素材_使用TileMap快速构造2D关卡_

    TileMap(瓷砖地图)是一种高效且灵活的工具,常用于构建2D游戏的环境和场景。本素材包主要围绕如何使用TileMap来快速构造2D关卡,帮助开发者节省时间和精力,专注于游戏玩法的创新。 1. TileMap简介: TileMap是2...

    TileMap地图游戏资源

    TileMap是一种广泛应用于游戏开发中的技术,特别是在2D游戏领域,它允许开发者通过组合小块图形(称为“瓷砖”或“瓦片”)来构建大而复杂的游戏世界。这种技术可以高效地创建和管理游戏环境,同时保持低内存占用和...

    (完整word版)X-tile-软件的操作流程.doc

    X-tile软件操作流程详解 X-tile是一款广泛应用于生物信息学和生物统计学领域的数据分析软件,主要用于生存分析和基因表达分析。下面是X-tile软件的操作流程详解: 一、数据准备 在使用X-tile软件之前,需要将...

    X~tile软件的操作流程.doc

    X~tile 软件操作流程知识点总结 X~tile 软件是进行生存期分析和基因表达相关性分析的重要工具,本文将对 X~tile 软件的操作流程进行详细的介绍和解释。 软件下载和安装 首先,需要下载 X~tile 软件并安装到计算机...

    MapTile切片工具

    MapTile是一款专为GIS(地理信息系统)用户设计的高效图片切片工具,它能够处理几乎所有的图片格式,并且用户可以根据需求自由设定切片等级。在WebGIS应用中,地图的加载速度往往受到单个图像文件大小的影响,Map...

    Tile Studio 地图编辑器

    《Tile Studio地图编辑器深度解析》 在游戏开发和像素艺术创作领域,地图编辑器扮演着至关重要的角色,其中Tile Studio地图编辑器以其强大的功能和易用性深受用户喜爱。本文将深入探讨Tile Studio的特性、功能以及...

    matlab开发-tile

    通常,官方MATLAB函数库中的函数已经高度优化,但在学习和理解MATLAB编程时,阅读这些源代码能帮助我们更好地掌握MATLAB的内部工作原理。 至于`license.txt`文件,它是MATLAB函数的许可协议,通常包含了关于使用、...

    Tidy Tile Mapper V1.4.6

    Tidy Tile Mapper is an easy-to-use, intuitive and powerful tile-based game creator for Unity, perfect for creating both 2D and 3D tile-based games. See the website, watch the videos. API documentation...

    X-tile(v3.6.1)包含.NET Framework 2.zip

    《X-tile软件及其对医学数据分析的重要性》 X-tile是一款强大的医学数据分析工具,尤其在预后或生存相关性分析中扮演着至关重要的角色。它主要用于寻找最佳的分组临界值,帮助研究人员将样本群体划分为不同亚组,以...

    Tidy Tile Mapper v1.4.4

    Tidy Tile Mapper is an easy-to-use, intuitive and powerful tile-based game creator for Unity, perfect for creating both 2D and 3D tile-based games. See the website, watch the videos. API ...

    TILE STUDIO中文版

    《TILE STUDIO中文版:地图编辑神器的深度解析》 在数字地图制作领域,有一款工具备受青睐,那就是TILE STUDIO。作为一款专为地图爱好者和专业制图者设计的地图编辑器,TILE STUDIO以其强大的功能和友好的用户界面...

    Tile studio

    "Tile Studio"是一款专为游戏开发设计的工具,主要用于创建和编辑游戏背景的贴图。在游戏开发中,贴图是构建游戏环境和角色的重要元素,而“Tile Studio”简化了这一过程,使得即便是初学者也能轻松上手。 首先,...

    一个android上游戏北京的Tile贴图实现

    "Tile贴图"(也称为瓷砖或切片贴图)是一种常见的解决方案,它能够有效地优化内存使用和渲染性能。本文将深入探讨如何在Android游戏中实现Tile贴图,以及其背后的原理和技术。 Tile贴图是一种将大图像分割成多个...

    tileStudio地图编辑器中文版

    《tileStudio地图编辑器中文版:开启你的2D游戏世界创作之旅》 在游戏开发领域,尤其是2D游戏,地图编辑器是不可或缺的工具之一。tileStudio作为一款知名的2D地图编辑器,以其强大的功能和易用性赢得了众多开发者和...

    mod_tile-0.5.zip

    "mod_tile-0.5.zip" 是一个与OpenStreetMap(OSM)相关的压缩文件,其版本号为0.5。OSM是一个全球性的、开放源代码的项目,旨在创建和分享地理信息数据,比如地图数据。这个压缩包可能包含了用于增强或修改OSM地图...

    Tile-Studio地图编辑器

    **Title:** Tile-Studio地图编辑器 **Description:** Tile-Studio是一款专用于创建和编辑地图的专业工具,尤其适用于像素艺术风格的游戏开发。它的最新版本为ts2_076b,其中包含的主要可执行文件是ts.exe。此外,...

    Super Tilemap Editor 1.7.0.unitypackage

    Super Tilemap Editor is a powerful and easy to use tile editor with everything you need to create any game based on tiles. Use it not only to create tilemaps but also as a powerful level editor ...

    X-tile软件,确定最佳的cut-off值,超值下载!

    X-tile是一款在生物信息学领域广泛使用的工具,主要用于确定最佳的cut-off值。这个cut-off值在医学研究,特别是癌症研究中具有重要意义,因为它可以帮助科学家们定义疾病分期、预测预后以及指导个体化治疗。在临床...

    ComfyUI+AnimateDiff+ControlNet的Tile生成动画.zip

    这个名为"ComfyUI+AnimateDiff+ControlNet的Tile生成动画.zip"的压缩包文件,显然涉及到几个关键概念,包括ComfyUI、AnimateDiff和ControlNet,以及Tile生成动画。我们将逐一探讨这些概念。 首先,ComfyUI可能是指...

Global site tag (gtag.js) - Google Analytics