Simple Flex 2.0 Drag Example

I read a comment the other day (not sure where it was) where someone requested a simple drag example in Flex 2.0, so I thought i’d knock one up, which includes an example of creating a custom DragSource object (you’d probably want to use a Class as this object instead of just Object, used in this example).

Simple Flex 2.0 Drag Example

19 Responses to “Simple Flex 2.0 Drag Example”

  1. BitTube says:

    This example Infringes on the recent Balthaser Patent Tink. Get involved. Make a noise.

    http://blog.bittube.com/2006/08/18/balthaser-patent-180-reexamination/

  2. Tink says:

    I did read this stuff on Aral’s blog the other day and yes it is of concern.

    The original email goes on about previous patents (stuff that I really know nothing of)

    So in layman’s terms, what information can actually help?

    If i got some clear concise info on how we can all help i think its worth creating a post about. Other than that, if i make a post, anyone as dense as me will read it and think ‘hmm thats worrying’, and move on.

  3. boxfood says:

    here is another one, my simple drag&drop

    http://www.flex2.org/demo/drag/drag.swf

    ps: the photo is not me, im chinese ;)

  4. BitTube says:

    Its really not about previous patents, Its about showing that the items that Balthaser has patented are not original Ideas or inventions. Things like drag and drop, scaling and rotating items and any other manipulation.

    The patent itself doesnt mention spcific technology as a result the patent affects ALL technologies.

    If you are aware of any application of the techniques and systems being patented (i.e. users modifying positions of any given asset online), and they were shown prior to the patent application, then they are all relevant as Prior Art.

    This would also include DHTML, Shockwave Director, Java etc.etc.

  5. Tink says:

    boxfood

    The point of this example it to show Drag and Drop using the DragManager and the ability to pass data within the DragEvent (such as you would need with a shopping cart).

    I’m not sure your example is the same thing, as you just moving an item around the screen? Also there no source, so it isn’t very helpful to anyone.

    Thanks though ;)

  6. BitTube says:

    In the case of Netvibes, as a signed in user the position of the components or panes is saved. This is the issue, it saves the positional information to the server and associates it to an account on the server.

  7. jwopitz says:

    Just curious to know if you have encountered any issues using drag & drop functionality when your content has been scrolled (in my case the scrolling occurs at the Application.application level). I am not sure why, but the containers that dispatch their built-in dragEvents, don’t seem to realize that they have been scrolled up or down and therefore they are firing their dragEvents without regard for thier x & y positions in the context of scrolled content.

    J

  8. Tink says:

    Hey J

    Can you link to an example file. I’d be interested in taking a look at the problem.

  9. jwopitz says:

    Hi Tink,

    Here is a link to the application: http://img308.imageshack.us/my.php?image=uicdragdropindexnp7.swf&width=1024

    If the swf’s application’s content has not been scrolled, it acts as it should, however, if you scroll the content down and then try dragging and dropping, it will register the dragEvents as though they are occuring else where. To see this, scroll down say 30px. Then drag content into the center column below the big area, then try dragging it upwards and over to the left column. Yuor mouse should be over the big main area, howver it is registering as though you are over the bottom left column. If yuo scroll upwards enough, it will even register that you have passed the vertical gap imposed by the main panel. Very strange behavior and this is utilizing Adobe’s built in dragEvents from the UIComponents

    Unfortunately I cannot post source code as this is a client project. But I can explain anything that you need more detailed information on.

  10. jwopitz says:

    I was doing some research and found that other folks are experiencing similar issues. This guy’s post states that it is at the browser level, but I am thinking he may just meant at the application level since Flex sometimes assumes that responsibility for tall content. From what I have found, it looks like it is a bug on Adobe’s end as it occurs not only with scrolling but also in terms of things like ViewStack header heights and the like.

    http://tech.groups.yahoo.com/group/flexcoders/message/49344

  11. Tink says:

    without any source all i can do is agree with you or make up a file myself. This might be something i will do if i find the time over the next few weeks, or alterniatively you could make an example file for people to look at.

  12. jwopitz says:

    Just thought I would update you folks about the scroll issue. I got to talking with Adobe and that is a bug in Flex. I sent them my files, they compiled it with their update and it corrected the issue. So when the official update comes out, this will no longer be an issue.

  13. Scott Means says:

    I’m running the debug version 9,0,28,0 and I’m pulling my hair out over a seemingly related drag-and-drop problem. For some reason the drop target for my custom control is offset vertically below the control itself. When probing mouseMove events, the control appears to be where it’s supposed to be, but all of the dragEnter, dragOver, etc. events are being dispatched when the mouse moves over an area below the control. Very irritating. Has anyone seen anything like this?

  14. Tink says:

    Can you mock up and simple example and let use see the code Scott?

  15. Scott Means says:

    Ok, I gutted my app to create a (relatively) simple case. Part of it is a sample app I integrated into my app when I thought I was going crazy. It didn’t work correctly either. Try dragging one of the coins over either of the recycle bins. The one in the app bar you can’t drag into at all, and my theory about that is that the drag region is clipped off of the bottom of the parent. You can drag them to the lower recycle bin, but only to an area below the icon itself. If I’m doing something stupid here, I’d love to know about it. Thanks!

  16. Scott Means says:

    Oops, I guess that link I typed in the Website field doesn’t show up. The testcase is at http://www.tenmillionmonkeys.com/FlashDragDropTest.zip.

  17. Tink says:

    I don’t see the problem. I can drag and drop any of the 4 coins onto either of the recycle bins.

    Also when u pass someone files it makes it a lot easier if you export the project from Flex Builder as an archive file. Then the person who recieves your files can just import them straight back into Flex without having to spend 10 minutes setting them up.

  18. Scott Means says:

    Thanks for trying it, I guess it’s something unique to my configuration. Bummer. Sorry about the Flex Builder thing, but I don’t use Flex Builder, I just edit with a text editor and use the Flex SDK. I guess I’m kind of a coding dinosaur.

  19. Tink says:

    Hmmm i can’t understand how any computer config could affect it.

    And no worries bout the Flex Builder thing, I just thought you maybe didn’t realize you could.

Leave a Reply