Draggable component

I want to make a component which is dragable
and also accept same type other component.
Like photoshop layer panel,history panel,property panel whis is combined together as grouped item and can also be detached using draging.
Is this possible in flex as 3.

Yes, for sure. Did you mean that you wanna use the Flex 3 or ActionScript 3?
If you are using Flex 3 take a look at this: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64595-7fed.html
If you are using Flex 4 you can also download the source code of this project: http://rectius.com.br/blog/?p=713
Regards,
Pablo Souza

Similar Messages

Create a Draggable Component?

I was wondering how to create a draggable component that only
stays within certain bounds.
for instance this is some code for the draggable item.
how do i get it to stay within a certain bounds

try this way
var board:Sprite = new Sprite();
var pt:Sprite = new Sprite();
board.graphics.lineStyle(1,0);
board.graphics.beginFill(0xCCCCCC);
board.graphics.drawRect(0,0,400,300);
board.graphics.endFill();
board.x = 10;
board.y = 10;
stage.addChild(board);
pt.graphics.lineStyle(1,0);
pt.graphics.beginFill(0x0000FF,0.7);
pt.graphics.drawCircle(0,0,20);
pt.graphics.endFill();
pt.x = 50;
pt.y = 50;
stage.addChild(pt);
var isDraging=false;
pt.addEventListener(MouseEvent.MOUSE_DOWN, startMove);
function startMove(evt:MouseEvent):void {
isDraging=true
//pt.startDrag(false);
pt.addEventListener(MouseEvent.MOUSE_UP, stopMove);
function stopMove(e:MouseEvent):void {
isDraging=false
//pt.stopDrag();
pt.addEventListener(Event.ENTER_FRAME,checkBoard)
function checkBoard(evt:Event){
if(!isDraging) return
pt.x=mouseX
pt.y=mouseY
if((pt.x+pt.width/2)>(board.x+board.width)){pt.x=board.x+board.width-pt.width/2;}
if((pt.x-pt.width/2)<board.x){pt.x=board.x+pt.width/2}
if((pt.y+pt.height/2)>(board.y+board.height)){pt.y=board.y+board.height-pt.height/2;}
if((pt.y-pt.height/2)<board.y){pt.y=board.y+pt.height/2}

Double-clicking a draggable component

I have an image that I want to be draggable as well as
double-clickable.
However, when I use a mouseDown event to initiate the drag,
and a doubleClick event to do something else (display a popup
form), the doubleClick event seems to get canceled out (ie the
popup form doesn't appear upon double-clicking the image). Only
when I remove the mouseDown event can I get the doubleClick event
to register. Similarly, after double-clicking, my dragComplete
event fires - consequently removing my image.
Is there something I'm doing wrong? A snippet of the code
below, trimmed for simplicity:
// drop the dragged item
private function dropData(parameters...):void{
var dropData:Image = new Image();
// set properties on the dropped data
dropData.source =
"images/image-placeholder.jpg";
dropData.doubleClickEnabled = true;
dropData.addEventListener("doubleClick",
showImageForm);
dropData.addEventListener("mouseDown",
dragItHandler);
dropData.addEventListener("dragExit",
dragExitHandler);
dropData.addEventListener("dragComplete",
dragCompleteHandler);
event.currentTarget.addChildAt(dropData, 0);

I did. It was a while ago now so my memory is a little fuzzy
but from what I recall there wasn't any way to prevent the
mouseDown event firing with a doubleClick event so I had to go with
a timer/interval. There is a good write up on how to approach it
here (plus some sample code):
http://raghuonflex.wordpress.com/2007/08/10/assigning-different-behaviors-on-click-doublec lick/.
Best of luck!

Draging a component

hi all,
i have created an applet with components such as label,texfield and buttons.Now i want to drag the components to some new locations in the applet.I went through some tutorials for drag and drop,but that dint help me. Everything explains about transferring datas....like moving the content of the label to a list box,etc....... I tried someother ways to do that.....but couldnt succeed,since i am new to this technology. so please help me do this.....
thanks in advance

My draggable class should help. Even if it's not exactly what your looking for you should be able to adapt it
you are welcome to use and modify this class but please do not change the package or take credit for it as your own work
Draggable.java
===========================
package tjacobs.ui;
import java.awt.Component;
import java.awt.Cursor;
import java.awt.Dimension;
import java.awt.Point;
import java.awt.Window;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionListener;
/** tjacobs.ui.Draggable
* usage:
*                Component c = ...
*                new Draggable(c);
*                parent.add(c);
public class Draggable extends MouseAdapter implements MouseMotionListener {
    Point mLastPoint;
    Component mDraggable;
    public Draggable(Component w) {
        w.addMouseMotionListener(this);
        w.addMouseListener(this);
        mDraggable = w;
     public Draggable(Window w, Component drag) {
          drag.addMouseMotionListener(this);
        drag.addMouseListener(this);
          mDraggable = w;
    public void mousePressed(MouseEvent me) {
          if (mDraggable.getCursor().equals(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR))) {
               mLastPoint = me.getPoint();
          else {
               mLastPoint = null;
     private void setCursorType(Point p) {
          Point loc = mDraggable.getLocation();
          Dimension size = mDraggable.getSize();
          if ((p.y + WindowUtilities.RESIZE_MARGIN_SIZE < loc.y + size.height) && (p.x + WindowUtilities.RESIZE_MARGIN_SIZE < p.x + size.width)) {
               mDraggable.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
    public void mouseReleased(MouseEvent me) {
        mLastPoint = null;
    public void mouseMoved(MouseEvent me) {
          setCursorType(me.getPoint());
    public void mouseDragged(MouseEvent me) {
        int x, y;
        if (mLastPoint != null) {
            x = mDraggable.getX() + (me.getX() - (int)mLastPoint.getX());
            y = mDraggable.getY() + (me.getY() - (int)mLastPoint.getY());
            mDraggable.setLocation(x, y);
}

Updating window components WHILE dragging the mouse

How do I update a whole window (JFrame), including it's components, during the following scenario:
1. mouse pressed - on any of the window's boundaries
2. mouse moved to a final position.
Currently the components of the window do not change until i stop moving the mouse.
I can't yet find an Event for clicking the mouse on the window's borders.

Check out my Resizeable code. This may be exactly what you are looking for. I've also included code for Draggable, which you might be interested in
You are welcome to have and to modify this code, but please do not take credit for it as your own work.
==========================================
     public static class Draggable extends MouseAdapter implements MouseMotionListener {
        Point mLastPoint;
        Component mDraggable;
        public Draggable(Component w) {
            w.addMouseMotionListener(this);
            w.addMouseListener(this);
            mDraggable = w;
        public void mousePressed(MouseEvent me) {
               if (mDraggable.getCursor().equals(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR))) {
                    mLastPoint = me.getPoint();
               else {
                    mLastPoint = null;
          private void setCursorType(Point p) {
               Point loc = mDraggable.getLocation();
               Dimension size = mDraggable.getSize();
               if ((p.y + RESIZE_MARGIN_SIZE < loc.y + size.height) && (p.x + RESIZE_MARGIN_SIZE < p.x + size.width)) {
                    mDraggable.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
        public void mouseReleased(MouseEvent me) {
            mLastPoint = null;
        public void mouseMoved(MouseEvent me) {
               setCursorType(me.getPoint());
        public void mouseDragged(MouseEvent me) {
            int x, y;
            if (mLastPoint != null) {
                x = mDraggable.getX() + (me.getX() - (int)mLastPoint.getX());
                y = mDraggable.getY() + (me.getY() - (int)mLastPoint.getY());
                mDraggable.setLocation(x, y);
     public static class Resizeable extends MouseAdapter implements MouseMotionListener {
          int fix_pt_x = -1;
          int fix_pt_y = -1;
        Component mResizeable;
          Cursor mOldcursor;
          public Resizeable(Component c) {
               mResizeable = c;
               c.addMouseListener(this);
               c.addMouseMotionListener(this);
          public void mouseEntered(MouseEvent me) {
               setCursorType(me.getPoint());
          private void setCursorType(Point p) {
               boolean n = p.y <= RESIZE_MARGIN_SIZE;
               boolean s = p.y + RESIZE_MARGIN_SIZE >= mResizeable.getHeight();
               boolean w = p.x <= RESIZE_MARGIN_SIZE;
               boolean e = p.x + RESIZE_MARGIN_SIZE >= mResizeable.getWidth();
               if (e) {
                    if (s) {
                         mResizeable.setCursor(Cursor.getPredefinedCursor(Cursor.SE_RESIZE_CURSOR));
                         return;
                    mResizeable.setCursor(Cursor.getPredefinedCursor(Cursor.E_RESIZE_CURSOR));
                    return;
               if(s) {
                    mResizeable.setCursor(Cursor.getPredefinedCursor(Cursor.S_RESIZE_CURSOR));
                    return;
          public void mouseExited(MouseEvent me) {
               if (mOldcursor != null)
                    ((Component)me.getSource()).setCursor(mOldcursor);
               mOldcursor = null;
        public void mousePressed(MouseEvent me) {
               Cursor c = mResizeable.getCursor();
               Point loc = mResizeable.getLocation();
               if (c.equals(Cursor.getPredefinedCursor(Cursor.SE_RESIZE_CURSOR))) {
                    fix_pt_x = loc.x;
                    fix_pt_y = loc.y;
                    return;
               if (c.equals(Cursor.getPredefinedCursor(Cursor.E_RESIZE_CURSOR))) {
                    fix_pt_x = loc.x;
                    fix_pt_y = -1;
                    return;
               if (c.equals(Cursor.getPredefinedCursor(Cursor.S_RESIZE_CURSOR))) {
                    fix_pt_x = -1;
                    fix_pt_y = loc.y;
                    return;
          public void mouseReleased(MouseEvent me) {
               fix_pt_x = -1;
               fix_pt_y = -1;
          public void mouseMoved(MouseEvent me) {
               setCursorType(me.getPoint());
          public void mouseDragged(MouseEvent me) {
               Point p = me.getPoint();
               int width = fix_pt_x == -1 ? mResizeable.getWidth() : p.x;
               int height = fix_pt_y == -1 ? mResizeable.getHeight() : p.y;
               mResizeable.setSize(new Dimension(width > 1 ? width : 1, height > 1 ? height : 1));
     }

Best way to create a speech bubble effect?

Hi there,
I'm currently writing a simple game using java 2D, on screen i would like to show some text surrounded by a speech bubble which will be used to show what a character is saying. I need the text to be scrollable as there might be alot of it and dont want to clog up the screen.
Initially i wanted to create this directly on the JPanel im using but could not figure out how to add a scrollable text area directly onto a JPanel (if its even possible!).
So i thought just use a pop up text box that would already be scrollable, but how can i get a pop up to have the appearence of a speech bubble?
Any help or hints would be appreciated.
Many thanks

Oh boy, do I have the thing for you.
A while back I built a quote class that looks like a quote in cartoon or something.
So I'll post the quote class, along with my Draggable and Resizeable classes, which make these things a snap. In order to drag or resize, you must set the layoutmanager to null of course
currently the quote extends JComponent and does not draw its background (so it's see-through) you can change this to JPanel to show the background, but you'll probably never want to do this.
You are welcome to use and to modify this code, but please do not change the package or claim it as your own work.
Quote.java
===========
* Created on May 25, 2005 by @author Tom Jacobs
package tjacobs.ui;
import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.LayoutManager;
import javax.swing.JComponent;
import javax.swing.JPanel;
public class Quote extends JComponent {
     String mTxt;
     public Quote() {
          super();
     public Quote(String s) {
          this();
          setText(s);
     public void setText(String txt) {
          mTxt = txt;
     public void paintComponent(Graphics g) {
          super.paintComponent(g);
          int width = getWidth();
          int height = getHeight();
          g.setColor(Color.RED);
          int wid = width / 10;
          int ht = height / 10;
          g.drawArc(wid / 2, ht / 2, wid * 9, ht * 9 , 0, -30);
          g.drawArc(wid / 2, ht / 2, wid * 9 , ht * 9, 0, 300);
          int ptx1 = (int) (width / 2 + wid * 18 / 4.0 * (Math.cos(30 * Math.PI / 180)));
          int pty1 = (int) (height / 2 + ht * 18 / 4.0 * (Math.sin(30 * Math.PI / 180)));
          int ptx2 = (int) (width / 2 + wid * 18 / 4.0 * (Math.cos(60 * Math.PI / 180)));
          int pty2 = (int) (height / 2 + ht * 18 / 4.0 * (Math.sin(60 * Math.PI / 180)));
          g.drawLine(ptx1, pty1, width, height);
          g.drawLine(ptx2, pty2, width, height);
          if (mTxt != null) {
               int x = (int) ((width / 2) * (1 - Math.sqrt(2) / 2));
               int y = (int) ((height / 2) + (height / 2 * Math.sqrt(2) / 2));
               int sqwidth = (int) (width * Math.sqrt(2) / 2);
               int sqheight = (y - height / 2) * 2;
               System.out.println("x = " + x + " y = " + y);
               Font f = g.getFont();
               FontMetrics fm = g.getFontMetrics();
               FontMetrics last = fm;
               float pt = f.getSize();
               while (fm.stringWidth(mTxt) < sqwidth && fm.getHeight() < sqheight) {
                    last = fm;
                    pt += 2;
                    f = f.deriveFont(pt);
                    fm = g.getFontMetrics(f);
               int x_diff = sqwidth - fm.stringWidth(mTxt);
               int y_diff = sqheight - fm.getHeight();
               g.setFont(f);
               g.drawString(mTxt, x + x_diff / 2, y - y_diff / 2 - fm.getHeight() / 5);
WindowUtilities.java
this contains draggable and resizeable
============
package tjacobs.ui;
import java.awt.*;
import java.awt.event.*;
import java.io.File;
import javax.swing.JFrame;
public abstract class WindowUtilities {
     public static final int RESIZE_MARGIN_SIZE = 4;
     public static final String VISUALIZE_FILE = "locations.dat";
     private static File sVisFile;
     private static class Entry {
          Class key;
          Point size;
     static {
          sVisFile = new File(VISUALIZE_FILE);
     public static Point getBottomRightOfScreen(Component c) {
         Dimension scr_size = Toolkit.getDefaultToolkit().getScreenSize();
         Dimension c_size = c.getSize();
         return new Point(scr_size.width - c_size.width, scr_size.height - c_size.height);
     public static Window visualize(Component c) {
          return visualize(c, true);
     public static Window visualize (Component c, int width, int height) {
          return visualize(c, true, width, height);
     public static Window visualize(Component c, boolean exit, int width, int height) {
          JFrame f;
          Window w;
          if (c instanceof Window) {
               w = (Window) c;
          else {
               f = new JFrame();
               f.getContentPane().add(c);
               w = f;
          w.setSize(width, height);
          w.setLocation(100, 100);
          if (exit) {
               w.addWindowListener(new WindowClosingActions.Exit());
          w.setVisible(true);
          return w;
     public static Window visualize(Component c, boolean exit) {
          JFrame f;
          Window w;
          if (c instanceof Window) {
               w = (Window) c;
          else {
               f = new JFrame();
               f.getContentPane().add(c);
               w = f;
          w.pack();
          w.setLocation(100, 100);
          if (exit) {
               w.addWindowListener(new WindowClosingActions.Exit());
          w.setVisible(true);
          return w;
     public static class Draggable extends MouseAdapter implements MouseMotionListener {
        Point mLastPoint;
        Component mDraggable;
        public Draggable(Component w) {
            w.addMouseMotionListener(this);
            w.addMouseListener(this);
            mDraggable = w;
        public void mousePressed(MouseEvent me) {
               if (mDraggable.getCursor().equals(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR))) {
                    mLastPoint = me.getPoint();
               else {
                    mLastPoint = null;
          private void setCursorType(Point p) {
               Point loc = mDraggable.getLocation();
               Dimension size = mDraggable.getSize();
               if ((p.y + RESIZE_MARGIN_SIZE < loc.y + size.height) && (p.x + RESIZE_MARGIN_SIZE < p.x + size.width)) {
                    mDraggable.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
        public void mouseReleased(MouseEvent me) {
            mLastPoint = null;
        public void mouseMoved(MouseEvent me) {
               setCursorType(me.getPoint());
        public void mouseDragged(MouseEvent me) {
            int x, y;
            if (mLastPoint != null) {
                x = mDraggable.getX() + (me.getX() - (int)mLastPoint.getX());
                y = mDraggable.getY() + (me.getY() - (int)mLastPoint.getY());
                mDraggable.setLocation(x, y);
     public static class Resizeable extends MouseAdapter implements MouseMotionListener {
          int fix_pt_x = -1;
          int fix_pt_y = -1;
        Component mResizeable;
          Cursor mOldcursor;
          public Resizeable(Component c) {
               mResizeable = c;
               c.addMouseListener(this);
               c.addMouseMotionListener(this);
          public void mouseEntered(MouseEvent me) {
               setCursorType(me.getPoint());
          private void setCursorType(Point p) {
               boolean n = p.y <= RESIZE_MARGIN_SIZE;
               boolean s = p.y + RESIZE_MARGIN_SIZE >= mResizeable.getHeight();
               boolean w = p.x <= RESIZE_MARGIN_SIZE;
               boolean e = p.x + RESIZE_MARGIN_SIZE >= mResizeable.getWidth();
               if (e) {
                    if (s) {
                         mResizeable.setCursor(Cursor.getPredefinedCursor(Cursor.SE_RESIZE_CURSOR));
                         return;
                    mResizeable.setCursor(Cursor.getPredefinedCursor(Cursor.E_RESIZE_CURSOR));
                    return;
               if(s) {
                    mResizeable.setCursor(Cursor.getPredefinedCursor(Cursor.S_RESIZE_CURSOR));
                    return;
          public void mouseExited(MouseEvent me) {
               if (mOldcursor != null)
                    ((Component)me.getSource()).setCursor(mOldcursor);
               mOldcursor = null;
        public void mousePressed(MouseEvent me) {
               Cursor c = mResizeable.getCursor();
               Point loc = mResizeable.getLocation();
               if (c.equals(Cursor.getPredefinedCursor(Cursor.SE_RESIZE_CURSOR))) {
                    fix_pt_x = loc.x;
                    fix_pt_y = loc.y;
                    return;
               if (c.equals(Cursor.getPredefinedCursor(Cursor.E_RESIZE_CURSOR))) {
                    fix_pt_x = loc.x;
                    fix_pt_y = -1;
                    return;
               if (c.equals(Cursor.getPredefinedCursor(Cursor.S_RESIZE_CURSOR))) {
                    fix_pt_x = -1;
                    fix_pt_y = loc.y;
                    return;
          public void mouseReleased(MouseEvent me) {
               fix_pt_x = -1;
               fix_pt_y = -1;
          public void mouseMoved(MouseEvent me) {
               setCursorType(me.getPoint());
          public void mouseDragged(MouseEvent me) {
               Point p = me.getPoint();
               int width = fix_pt_x == -1 ? mResizeable.getWidth() : p.x;
               int height = fix_pt_y == -1 ? mResizeable.getHeight() : p.y;
               mResizeable.setSize(new Dimension(width > 1 ? width : 1, height > 1 ? height : 1));
}

Irregular shaped Canvas/UIComponent

How can I create irregular shaped canvas/UIComponent? By irregular shaped, I mean teris like shapes. Is there a proper way of doing it?
This will be a draggable component. Once the dragged component is overlapped on another component, user should be able to what is in the background.
Thanks in advance.

Can this be made dynamic? The backend is returning a bunch of images that are different in shape. Actually this is what happening: Backend is generating a flat image out of bunch of small images. We know the contour and the points that creates the contour.
And we are using Flex 3.

Blocking a drag operation

I have a bunch of tree nodes that I want to perform drag/drop on. I would like to prevent some of these tree nodes from being draggable. So, I need a way to grab the object attempting to be dragged and interrogate it to see if it's a draggable node.
I am using a TransferHandler, and a DropTargetAdapter.
How do i grab the object attempting to be dragged, and 'block' it from being dragged if I determine it is not a draggable node?

That's what I'm doing now, but it isn't the ideal
solution. I don't want the user to be able to drag
the object in the first place.A DropAdapter isn't going to help you here. You need something on the Drag side for that. I'm using either the DragGestureRecognizer or the DragSourceListener interface (can't remember which, the code's on my home computer). DragGestureRecognizer sounds more like it based on the documentation. Don't call startDrag() unless you're over a draggable component.

Change the mouse pointer to an Hour glass

hello,
Could any one of you let me know how to make mouse pointer to an hour glass in swing application.
Thanking you in advance..
Ram

Check out how I do this in my Draggable classs
you are welcome to use and modify this class, but please don't change the package or take credit for it as your own work
package tjacobs.ui;
import java.awt.Component;
import java.awt.Cursor;
import java.awt.Dimension;
import java.awt.Point;
import java.awt.Window;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionListener;
* tjacobs.ui.Draggable<p>
* Makes a component draggable. Does not work if there's a layout manager
* messing with things<p>
* <code>
* usage:
*                Component c = ...
*                new Draggable(c);
*                parent.add(c);
* </code>
public class Draggable extends MouseAdapter implements MouseMotionListener {
    Point mLastPoint;
    Component mDraggable;
    public Draggable(Component w) {
        w.addMouseMotionListener(this);
        w.addMouseListener(this);
        mDraggable = w;
     public Draggable(Window w, Component drag) {
          drag.addMouseMotionListener(this);
        drag.addMouseListener(this);
          mDraggable = w;
    public void mousePressed(MouseEvent me) {
          if (mDraggable.getCursor().equals(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR))) {
               mLastPoint = me.getPoint();
          else {
               mLastPoint = null;
     private void setCursorType(Point p) {
          Point loc = mDraggable.getLocation();
          Dimension size = mDraggable.getSize();
          if ((p.y + WindowUtilities.RESIZE_MARGIN_SIZE < loc.y + size.height) && (p.x + WindowUtilities.RESIZE_MARGIN_SIZE < p.x + size.width)) {
               mDraggable.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
    public void mouseReleased(MouseEvent me) {
        mLastPoint = null;
    public void mouseMoved(MouseEvent me) {
          setCursorType(me.getPoint());
    public void mouseDragged(MouseEvent me) {
        int x, y;
        if (mLastPoint != null) {
            x = mDraggable.getX() + (me.getX() - (int)mLastPoint.getX());
            y = mDraggable.getY() + (me.getY() - (int)mLastPoint.getY());
            mDraggable.setLocation(x, y);
}

Custom Drag and Drop Component: When i add a skin, drag and drop no longer works?

I have a skinnableContainer that acts as a container for other drag and droppable items. This container's drop functionality is added from it's parent at the same moment the container is added.
This all works fine until i add a skin class to the skinnableContainer, now none of the draggable items can drop into the container as it did before.
I assume that the Group component wrapping the content from within the skin is acting as a block somehow, but i'm not sure how to allow the drop functionality through it?
Any ideas? Thanks in advance.

Hello,
Thanks for your replies... I tried modifying the if clause,
but it did not work. I can use a trace statement to find out what
the target is and what level it is at, but I cannot do this when it
is in our presenter window.
The code that is causing the problem can be accessed right in
Flash. Just create a new quiz, then in the library, go to Quiz
Files --> Learning Interactions --> Assets --> Controls
--> Components, right click on drag and drop and select edit and
then go to the actions frame. I am sure you already know this, but
I just want to be clear I did not make this from scratch.
This code works great when the quiz is the root movie. But if
the quiz is encapsulated within another movie, it does not work. I
can drag the objects, but they just snap back to where their
starting points are. In the code I attached earlier...
"this._parent.Target1" used to be "target".
Just so you can see it all, I have attached the problematic
function.
What happens is that if "this._parent.Target1" is set to
"target", the movie will function fine in Flash, but will not work
in our presentation window. I can drag the draggable objects, but
they always snap back to the location of where they came from.
What this means is that the if clauses are not being run, and
the function is always running the else clause, which puts all of
the objects back at their starting point.
In the code attached, I am using "this._parent.Target1".
Again, works fine in Flash, but when I put it in the presentation
window, this time, I can drag the objects anywhere on the screen,
but when I drop them, they think that the dropZone is the question
itself, and not the Target (Target1). So I need to figure out how
to make Target1 be the dropZone in our presentation window.
Any ideas?
Thanks again for all your help!

Passing function to a custom component

Hey so I have button that is in a custom component, say:
<mx:HBox width="200" height="72" xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Button width="72" height="72" styleName="{buttonStyleName}"/>
    <mx:Text text="{description}" width="100%" height="100%" textAlign="justify"/>
</mx:HBox>
And on another file i use it simply like this:
<local:LabelComponent buttonStyleName="componentRssButton" />
However, I want the button on my custom component draggable, so I would like to pass a mouseMove handler but i could not find a way to do that. Of course that easiest way is to have my whole custom component draggable like so:
<local:LabelComponent mouseMove="componentRssButton" />
but i want the button in the custom component the only one draggable.
Thanks.

it's wired to pass a function.
EventListener should be the way to go.
give your button an id, say btn1
<mx:Button id='btn1' width="72" height="72" styleName="{buttonStyleName}"/>
and in your code
<local:LabelComponent id='myComp' creationComplete='makeButtonDraggable()' buttonStyleName="componentRssButton" />
<script>
function makeButtonDraggable():vd
     myComp.btn1.addEventListener(mouseMove, componentRssButton);

Draggable Pie Chart

Hi everyone,
I'm new to Flex, and I see that creating a pie chart is
normally very easy with the Pie Chart component. However, I need to
create a pie chart where the edges of the slices are draggable. In
other words, I want the user to be able to resize slices
dynamically. Would there be any way to utilize the Pie Chart
component for this task, or would I need to start from scratch? Any
ideas on where to start?
Thanks!

Hey visit
http://shaileshmakwana.blogspot.com/2010/04/draggable-wedges-in-pie-chart.html

Control over the scrollPane component.

Gidday
I've got some moveieClips in container in a scrollpane component.
The movieClips are draggable.
I'd like to add extra functionality where if an item is dragged and touches the bottom of the scrollpane, it automatically scrolls up, and the reverse if you touch the top with a dragged object.
I tried the scrollDrag, but I only want it to scroll once the dragged item touches the bottom or top.
So I wrote this and put it in the drag function:
    if ((this.hitTestObject(MovieClip(this.root).rowsHolderTopLine)) && MovieClip(this.root).rowsHolder.y < 200)
            trace(MovieClip(this.root).rowsHolder.y);
            MovieClip(this.root).rowsHolder.y = MovieClip(this.root).rowsHolder.y+10;
            this.y = this.y-10;
It needs a bit of work, and I think I can get it working, but the one thing I'm stumped on is how to make the scrollbar move too. Is there a way to communicate with the component using code (I created this component from the component inspector)?
Thanks
Shaun

OK - I think I've got it:
MovieClip(this.root).playlistScrollPane.verticalScrollPosition = MovieClip(this.root).playlistScrollPane.verticalScrollPosition-10
this.y = this.y-10;
Needs a bit of work, but it's on the right track.
Cheers
Shaun

Smart file component(html5smartfile) not working

votefavorite
I have been working on developing a custom extjs console to enable author drop an asset usinghtml5smartfile component. But somehow, the html5smartfile component is not working the way it should. The Area where an author can drop an asset is not displaying. The same is working fine if i am creating a CQ5 dialog. But in my case where i have created a window it's not working.
i have declared my smartfile component like this :-
var assetLinkDropField = { xtype: 'html5smartfile', fieldLabel: 'Asset Link', ddAccept: 'video/.*',ddGroups: 'media', fileReferenceParameter: './linkUrl', name: './linkUrl', allowUpload: false, allowFileNameEditing: false, allowFileReference: true, transferFileName: false };
but this is rendering like this:-
i have tried a lot, after working for 8-10 hours, i found out that the CQ5 dialog updates the view for the component but in case of my window, i have to update it myself. Thus, with a slight manipulation, i just succeeded in displaying the drag area by by tweaking the declaration like this:-
var assetLinkDropField = { xtype: 'html5smartfile', fieldLabel: 'Asset Link', ddAccept: 'video/.*',ddGroups: 'media', fileReferenceParameter: './linkUrl', name: './linkUrl', allowUpload: false, allowFileNameEditing: false, allowFileReference: true, transferFileName: false, listeners: { afterlayout: function () { this.updateView(); } } }
so now the panel looks like:-
but still the Drag and Drop is not working. My Window declaration is like this:-
win = new CQ.Ext.Window({ height : 750, width : 700, layout : 'anchor', // animateTarget : btn.el, closeAction : 'close', // Prevent destruction on Close id : 'manageLinkWindow', title : '<b>Multi Link Widget Dialog</b>', frame : true, draggable : false,modal : false, //Mask entire page constrain : true, buttonAlign : 'center', items : [assetLinkDropField] }); }
Can anyone please look into this issue. I am stuck here for 3 days. Thanks in Advance.

add a slider component to the main (loading) swf's library.

Creating a Video Player with Dynamic Draggable Playlist. Is it doable in Flash? Help Please

Hello Everyone,
I am scripting a video player and one of its functionalities
is to be able to have a playlist that can be arranged by the user
in any order user like. For Example, if there are lets say 5 videos
within the playlist:
SONG 1
SONG 2
SONG 3
SONG 4
SONG 5
User can then change the order of the videos by clicking on
any video and dragging it up or down just like windows mediaplayer
and the player should play the videos in such order.
So far, I have been able to use the list component but am not
sure if it will allow the dragging.
I would highly appreciate it if you guys can suggest what
should I do to handle this functionality.
Thanks.

Hm, you could define ‘slots’ with rectangles and
each slot would map to a specific slot in some
‘playlist’. Then create your own ‘list
renderer’ that attaches draggable clips based on the playlist
array. During drag and drop, you’d detect which
‘slot’ the movieclip was dropped into, which would
define where in the playlist array it should be inserted.
Then shift the elements around, insert the item in the array,
and rerender the list.
(I’m sure there are probably better/neater ways to do
this as well, this is just quickly off the top of my head).

Draggable component

Similar Messages

Maybe you are looking for