`

Flex 图片拖动

    博客分类:
  • Flex
阅读更多

图片拖动类:

package prx.drag
{
	import mx.core.UIComponent;
    import mx.core.DragSource;
    import mx.controls.Image;
    import mx.events.DragEvent;
    import mx.managers.DragManager;
    import flash.display.DisplayObject;
    import flash.display.BitmapData;
    import flash.display.Bitmap;
    import flash.events.MouseEvent;
	
	public class DragUtil
	{
		public function DragUtil() {
		}

		/**
	     * 开始拖拽
	     * */
	    public static function dragHandler(event:MouseEvent):void
	    {
	        // 定义拖拽挂载数据源
	        var dsragSource:DragSource = new DragSource();
	        // 定义拖拽图标
	        var copy:Image = new Image();
	        // 拖拽对象
	        var target:Image = event.currentTarget as Image;
	
	        // 添加拖拽数据源数据
	        dsragSource.addData(target, "img");
	        dsragSource.addData(event.localX, "x");
	        dsragSource.addData(event.localY, "y");
	
	        // 拖拽图标
	        copy.source = new Bitmap(getBitmapData(target.content));
	        // 执行拖拽
	        DragManager.doDrag(target, dsragSource, event, copy);
	    }
	    /**
	     * 进入拖放区域
	     * */
	    public static function dragEnterHandler(event:DragEvent):void
	    {
	        // 进入区域, 设置状态为允许拖放
	        if (event.dragSource.hasFormat("img"))
	            DragManager.acceptDragDrop(event.target as UIComponent);
	    }
	    /**
	     * 释放拖拽
	     * */
	    public static function dragDropHandler(event:DragEvent):void
	    {
	        var img:Image = event.dragSource.dataForFormat("img") as Image;
	        // 处理图片防止位置
	        img.x = event.currentTarget.mouseX - (event.dragSource.dataForFormat("x") as Number);
	        img.y = event.currentTarget.mouseY - (event.dragSource.dataForFormat("y") as Number);
	    }
	    /**
	     * 获取图片信息
	     * */
	    private static function getBitmapData(target:DisplayObject):BitmapData
	    {
	        var res:BitmapData = new BitmapData(target.width, target.height);
	        res.draw(target);
	        return res;
	    }
	}
}

  

 

 

使用方法:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
    width="624"
    height="458"
    minWidth="350"
    minHeight="136"
    backgroundColor="#ffffff"
	>
  	<mx:Script>
  		<![CDATA[
  			import prx.drag.DragUtil;
  		]]>
  	</mx:Script>
	<mx:Canvas id="testArea" backgroundColor="#ffffff" width="300" height="400" 
    	dragEnter="DragUtil.dragEnterHandler(event);" dragDrop="DragUtil.dragDropHandler(event);" >
		<mx:Image source="images/stop.png" mouseDown="DragUtil.dragHandler(event);" />
	    <mx:Image source="images/sound.png" mouseDown="DragUtil.dragHandler(event);" />
	</mx:Canvas>
    
</mx:Application>

 

0
0
分享到:
评论

相关推荐

    flex 图片画线,拖动

    在图片拖动的场景中,我们可以将图片作为一个flex项目,利用flexbox的特性来调整图片的位置和尺寸。 图片画线则可能涉及SVG(Scalable Vector Graphics)技术。SVG是一种基于XML的矢量图像格式,它可以被用来创建可...

    Flex 图片旋转 缩放 拖动 特效

    在Flex开发中,图片的旋转、缩放和拖动功能是常见的交互效果,尤其是在构建富互联网应用程序(RIA)时。Flex作为一个基于ActionScript 3.0的开源框架,提供了强大的图形处理和用户交互能力,使得实现这些特效成为...

    flex鼠标拖动图片

    在本文中,我们将深入探讨如何在Flex环境中实现鼠标拖动图片的功能,并在鼠标松开时停止拖动。Flex是一种基于ActionScript 3.0的开放源代码框架,用于构建富互联网应用程序(RIAs)。它提供了丰富的用户界面组件库,...

    flex实现的拖拽控件

    在这个场景中,我们关注的是Flex实现的拖拽控件,这是一种交互式UI元素,允许用户通过鼠标操作移动元素,提供了丰富的用户体验。 拖拽功能在Flex中可以通过使用内置的DragManager类和Event类来实现。DragManager类...

    Flex4实现拖拽功能

    在本主题中,我们将深入探讨如何在Flex4中实现图片的拖放功能,包括两种模式:拖动图片不删除原图和拖动图片后删除原图。 首先,我们需要了解Flex4中的DragManager类,它是实现拖放操作的核心。DragManager提供了...

    Flex 拖拽图片代码

    ### Flex 拖拽图片代码解析 #### 一、引言 本文主要解析一份关于Flex 3.0中实现图片拖拽功能的代码。通过详细分析这份代码,可以帮助读者更好地理解Flex中的拖拽机制以及如何在实际项目中应用这一功能。 #### 二、...

    flex 两个图片播放小程序

    在这个“flex 两个图片播放小程序”项目中,我们可以看到它被用来创建一个图片浏览应用,支持图片的放大和缩小功能,提供了用户友好的交互体验。接下来,我们将深入探讨Flex在图片浏览中的应用及其关键技术。 首先...

    flex 图片查看器

    在Flex图片查看器中,"zoomin" 和 "zoomout" 是两个关键功能,它们允许用户对图片进行放大和缩小操作。这一特性在很多应用场景中都非常实用,比如在线看图、产品细节展示或者图像分析等。Zoomin功能允许用户点击或...

    FLEX 图片上传管理器

    通过拖动图片至回收站区域即可完成删除操作,而要恢复则只需将图片从回收站移回,体现了良好的用户友好性。 5. 图片别名设置:用户可以为每张图片设置别名,这个别名将在上传时作为参数传递给后台系统。别名的使用...

    Flex图片预览功能的实现

    一、Flex图片预览组件基础 在Flex中,我们可以利用MX或Spark组件库中的Image组件来展示单张图片。然而,为了实现多图预览和滚动效果,我们需要自定义组件或者使用现有的第三方库,如在本例中的"photocoverflowLayout...

    一个Flex鼠标拖拽图片的简单例子(附源码)

    标题中的"一个Flex鼠标拖拽图片的简单例子(附源码)"表明我们将讨论如何在Flex项目中创建一个可拖动的图片元素。在Flex中,实现这一功能主要涉及事件监听、坐标转换和图形渲染等技术。以下是具体步骤和知识点: 1....

    FLEX 图片浏览功能可以轻松实现图片浏览

    标题提及的"“FLEX 图片浏览功能可以轻松实现图片浏览”",这指的是使用Flex3开发的图片查看器应用,它允许用户方便地查看和浏览图片,同时可能还支持一些高级特性,如缩放、旋转、平移等。Flex3提供了强大的图形...

    flex 图片编辑器

    在开发Flex图片编辑器时,主要涉及以下知识点: 1. **Flex SDK**:Flex SDK是开发Flex应用程序的基础,包括ActionScript编译器和MXML编译器,以及用于构建、测试和部署应用的工具。开发者需要下载并安装SDK来开始...

    Flex 简单的图片浏览

    总结来说,创建一个Flex图片浏览应用,需要掌握Flex的组件系统、事件处理机制以及图形渲染的基础知识。通过结合MXML和ActionScript,我们可以构建出一个具有缩放和平移功能的图片浏览器,提供用户友好的体验。在实际...

    flex剪裁图片demo

    "flex剪裁图片demo"是一个利用CSS Flexbox布局技术来实现图片剪裁功能的示例。下面将详细介绍如何使用Flexbox来创建一个可调整大小的图片剪裁框。 **一、Flexbox简介** Flexbox(弹性盒布局)是CSS3中的一种布局...

    flex 图片缩放移动组件

    以上就是创建Flex图片缩放移动组件的主要步骤和技术要点。通过熟练掌握这些知识,开发者可以构建出具有交互性、可扩展性的图像操作界面,提升用户体验。在实际应用中,可能还需要考虑触摸设备的支持、多线程优化、...

    FLEX自定义拖拽容器Dashboard

    flex写的一个可拖拽的容器系统 有点像背包系统 但背包内元素是图标 这个是容器里面愿意放什么放什么(如列表、日历等) 本资源非原创 从老外那找的 里面是纯代码生成的 支持技术研究(如果是图片格式请不要下载,...

    FLEX 容器内多个图片分别拖动

    ### FLEX 容器内多个图片分别拖动 在Adobe Flex框架中实现多个图片的独立拖动是一项实用且常见的功能,特别是在开发具有交互性的应用程序时。本文将详细解析如何使用Flex实现这一功能,并深入探讨其背后的原理和...

    flex单击图片拖动,双击图片旋转,双击单击同时用

    flex单击图片拖动,双击图片旋转,双击单击同时用,虽然不难,但对初学者很有帮助的,找到一个很好的例子来学习flex会事半功倍

    Flex裁剪图片

    通过以上步骤,我们可以构建一个功能完备的Flex图片裁剪应用。在实际开发中,还需要考虑性能优化、错误处理、兼容性等问题,确保应用在各种环境下的稳定运行。同时,对于源码的学习和分析,可以帮助开发者更深入理解...

Global site tag (gtag.js) - Google Analytics