Re: [flexcoders] Drag Drop Question
jmfillman,
You just need to add event listeners to your button before adding it to your
dropBox Canvas.
See below.
Cheers.
- Jae
private function dragDropHandler( event:DragEvent) :void {
{
...
buttonA.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
buttonA.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
buttonA.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
dropBox.addChild( buttonA);
...
}
// Note this is needed for smoothing drag. Highly necessary in my
opinion.
private function mouseMove(event:MouseEvent):void
{
event.updateAfterEvent();
}
private function mouseDown(event:MouseEvent):void
{
if (event.target is Button)
{
event.target.startDrag();
}
}
private function mouseUp(event:MouseEvent):void
{
if (event.target is Button)
{
event.target.stopDrag();
}
}
- Original Message
From: jmfillman [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Thursday, February 22, 2007 11:57:04 PM
Subject: [flexcoders] Drag Drop Question
See code below. After you drag an item from the list and drop it
into
the Canvas, how you do then drag the item you just dropped, have it
run the dragDropHandler function, and then move the original item?
?xml version=1.0 ?
mx:Application xmlns:mx=http://www.adobe. com/2006/ mxml
layout=absolute width=500 height=620 borderStyle= solid
creationComplete= initApp( );
mx:Script
![CDATA[
import mx.controls. Button;
import mx.controls. Alert;
import mx.events.DragEvent ;
import mx.controls. List;
import mx.managers. DragManager;
import mx.core.DragSource;
private function initApp():void {
var dp:Array = ([
{label:First , data:25},
{label:Second , data:50},
{label:Third , data:75},
{label:Fourth , data:100},
]);
listOne.dataProvide r = dp;
}
private function dragEnterHandler( event:DragEvent) :void {
var dropTarget:Canvas= event.currentTar get as Canvas;
dropTarget.setStyle (borderThicknes s, 5);
DragManager. acceptDragDrop( dropTarget) ;
}
private function dragExitHandler( event:DragEvent) :void {
var dropTarget:Canvas= event.currentTar get as Canvas;
revertBoxBorder( );
}
private function dragDropHandler( event:DragEvent) :void {
var dropTarget:Canvas= event.currentTar get as Canvas;
var buttonA:Button = new Button;
buttonA.label =
listOne.selectedIte m.label;
if (dropTarget. mouseY.valueOf( ) = 0
dropTarget.mouseY. valueOf() 100) {
buttonA.y = 0;
buttonA.y = 0;
}
if (dropTarget. mouseY.valueOf( ) =
100 dropTarget.mouseY. valueOf() 200) {
buttonA.x = 00;
buttonA.y = 100;
}
dropBox.addChild( buttonA);
revertBoxBorder( );
}
private function revertBoxBorder( ):void {
dropBox.setStyle( borderThickness ,
1);
}
]]
/mx:Script
mx:List id=listOne dragEnabled= true
dropEnabled= true x=10 y=10/mx: List
mx:Canvas x=180 y=10 width=308 height=498
borderStyle= solid borderColor= #00 backgroundColor= #FF
dragEnter=dragEnte rHandler( event);
id=dropBox dragExit=dragExitH andler(event) ;
dragDrop=dragDropH andler(event) ;
/mx:Canvas
/mx:Application
!--
#ygrp-mlmsg {font-size:13px;font-family:arial,helvetica,clean,sans-serif;}
#ygrp-mlmsg table {font-size:inherit;font:100%;}
#ygrp-mlmsg select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
#ygrp-mlmsg
Re: [flexcoders] Re: Drag Drop Question
Hi jmfillman,
You made it all the way, except for the variable referencing part. As opposed
to creating a new Button object, you just need to get a reference to the Button
you've been dragging around, i.e. var selectedButton:Button = event.target as
Button;
Enjoy.
- Jae
public function mouseUp(event:MouseEvent) :void
{
if (event.target is Button)
{
event.target.stopDrag( );
// Assign a reference variable to the button that has been dragged
around.
var selectedButton:Button = event.target as Button;
if (event.stageY. valueOf() = 10 event.stageY. valueOf() 110)
{
selectedButton.x = 0;
selectedButton.y = 0;
selectedButton.width = 150;
}
if (event.stageY.valueOf() = 110 event.stageY.valueOf() 210)
{
selectedButton.x = 0;
selectedButton.y = 100;
selectedButton.width = 150;
}
}
}
- Original Message
From: jmfillman [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Friday, February 23, 2007 4:10:31 PM
Subject: [flexcoders] Re: Drag Drop Question
Thank you Jae. That is far better than what I had worked out.
This had led me to another question. When I move one of the buttons,
the mouseUp function is firing and going to the correct IF statement.
What it isn't doing is moving the item to the (x,y) position
specified in the IF statement, it's just dropping it where ever I
drop it.
I'm also curious what the impact is of having every item
called buttonA and if there isn't a better way.
?xml version=1.0 ?
mx:Application xmlns:mx=http://www.adobe. com/2006/ mxml
layout=absolute width=500 height=620 borderStyle= solid
creationComplete= initApp( );
mx:Script
![CDATA[
public var slot001A:Boolean;
public var slot001B:Boolean;
import mx.controls. Button;
import mx.controls. Alert;
import mx.events.DragEvent ;
import mx.controls. List;
import mx.managers. DragManager;
import mx.core.DragSource;
private function initApp():void {
var dp:Array = ([
{label:First , data:25},
{label:Second , data:50},
{label:Third , data:75},
{label:Fourth , data:100},
]);
listOne.dataProvide r = dp;
}
private function dragEnterHandler( event:DragEvent) :void {
var dropTarget:Canvas= event.currentTar get as Canvas;
dropTarget.setStyle (borderThicknes s, 5);
if (slot001A==false) {
if (event.stageY. valueOf() =
10 event.stageY. valueOf() 110) {
DragManager. acceptDragDrop( dropTarget) ;
}
}
if (slot001B==false) {
if (event.stageY. valueOf() =
110 event.stageY. valueOf() 210) {
DragManager. acceptDragDrop( dropTarget) ;
}
}
}
private function dragExitHandler( event:DragEvent) :void {
var dropTarget:Canvas= event.currentTar get as Canvas;
revertBoxBorder( );
}
public function dragDropHandler( event:DragEvent) :void {
var dropTarget:Canvas= event.currentTar get as Canvas;
var buttonA:Button = new Button;
buttonA.label= listOne.selected Item.label;
buttonA.height= listOne.selected Item.data;
buttonA.addEventLis tener
(MouseEvent. MOUSE_DOWN, mouseDown);
buttonA.addEventLis tener
(MouseEvent. MOUSE_MOVE, mouseMove);
buttonA.addEventLis tener
(MouseEvent. MOUSE_UP, mouseUp);
buttonA.addEventLis tener
(MouseEvent. CLICK, buttonClick) ;
if (event.stageY. valueOf() = 10
event.stageY. valueOf() 110) {
buttonA.x = 0;
buttonA.y = 0;
buttonA.width = 150;
slot001A=true;
}
else{
Re: A Solution Found [flexcoders] How I can get the benefit of both startDrag() and DragManager.doDrag()?
Igor,
Thanks for your input. I personally like rviewer example. It demonstrates
well the use of DragManager, but it misses one important feature that I was
after, naming permanent location change of the drag initiator.
Luckily, I made a break through in my implementation roadblock. I had a
roadblock in that I could select a node and drag it to another node, but
MOUSE_OVER behavior of the drag target did not always work due to FLEX design
implementation, which always returns mouse event target that is at the lowest
in the hierarchy.
You most likely know this, but in the interest of the development community,
take the example of a Canvas with two child nodes with MOUSE_OVER event handler
among other event handlers,
Node A (childIndex = 0)
Node B (childIndex = 1)
If Node A is clicked and dragged via startDrag() to Node B, Node B's MOUSE_OVER
event fires. This is workable behavior that I can build on.
However, if Node B is clicked and dragged via startDrag() to Node A, Node A's
MOUSE_OVER event DOES NOT fire. This was my roadblock.
The simple and elegant solution that I was looking is as follows.
Canvas(event.currentTarget.parent).setChildIndex(myNode(event.currentTarget),
0); in the MOUSE_DOWN event handler.
The above line reorders childIndex and consequently the event target hierarchy
such that the node that is being dragged around does not prevent other node's
MOUSE_OVER event from occurring.
Again, thanks for your input.
- Jae
- Original Message
From: Igor Costa [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Thursday, February 22, 2007 7:03:11 PM
Subject: Re: [flexcoders] How I can get the benefit of both startDrag() and
DragManager.doDrag()?
Jae
http://weblogs. macromedia. com/khoyt/ files/rviewer. zip
the source also is avaible you could change.
There's other component on the Exchange that do the same not as Kevin Yot but
similar.
Regards.
On 2/22/07, jwp2k_uva [EMAIL PROTECTED] com wrote:
Hey guys,
I'm looking to create objects, i.e. boxes, that I can drag around to
different locations and have the ability to link to each other via
drag and drop operation. The objective that I'm trying to achieve is
similar to the following example.
http://weblogs. macromedia. com/khoyt/ archives/ 2006/11/flex_ associatio. cfm
The above example would have been perfect, except the boxes cannot be
dragged to different locations.
At this point, I hit a road block in trying to handle mouse events
directly and I would greatly appreciate your elegant approach.
Thanks!
- Jae
--
- ---
Igor Costa
www.igorcosta. org
www.igorcosta. com
skype: igorpcosta
!--
#ygrp-mlmsg {font-size:13px;font-family:arial,helvetica,clean,sans-serif;}
#ygrp-mlmsg table {font-size:inherit;font:100%;}
#ygrp-mlmsg select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
#ygrp-mlmsg pre, code {font:115% monospace;}
#ygrp-mlmsg * {line-height:1.22em;}
#ygrp-text{
font-family:Georgia;
}
#ygrp-text p{
margin:0 0 1em 0;
}
#ygrp-tpmsgs{
font-family:Arial;
clear:both;
}
#ygrp-vitnav{
padding-top:10px;
font-family:Verdana;
font-size:77%;
margin:0;
}
#ygrp-vitnav a{
padding:0 1px;
}
#ygrp-actbar{
clear:both;
margin:25px 0;
white-space:nowrap;
color:#666;
text-align:right;
}
#ygrp-actbar .left{
float:left;
white-space:nowrap;
}
.bld{font-weight:bold;}
#ygrp-grft{
font-family:Verdana;
font-size:77%;
padding:15px 0;
}
#ygrp-ft{
font-family:verdana;
font-size:77%;
border-top:1px solid #666;
padding:5px 0;
}
#ygrp-mlmsg #logo{
padding-bottom:10px;
}
#ygrp-vital{
background-color:#e0ecee;
margin-bottom:20px;
padding:2px 0 8px 8px;
}
#ygrp-vital #vithd{
font-size:77%;
font-family:Verdana;
font-weight:bold;
color:#333;
text-transform:uppercase;
}
#ygrp-vital ul{
padding:0;
margin:2px 0;
}
#ygrp-vital ul li{
list-style-type:none;
clear:both;
border:1px solid #e0ecee;
}
#ygrp-vital ul li .ct{
font-weight:bold;
color:#ff7900;
float:right;
width:2em;
text-align:right;
padding-right:.5em;
}
#ygrp-vital ul li .cat{
font-weight:bold;
}
#ygrp-vital a {
text-decoration:none;
}
#ygrp-vital a:hover{
text-decoration:underline;
}
#ygrp-sponsor #hd{
color:#999;
font-size:77%;
}
#ygrp-sponsor #ov{
padding:6px 13px;
background-color:#e0ecee;
margin-bottom:20px;
}
#ygrp-sponsor #ov ul{
padding:0 0 0 8px;
margin:0;
}
#ygrp-sponsor #ov li{
list-style-type:square;
padding:6px 0;
font-size:77%;
}
#ygrp-sponsor #ov li a{
text-decoration:none;
font-size:130%;
}
#ygrp-sponsor #nc {
background-color:#eee;
margin-bottom:20px;
padding:0 8px;
}
#ygrp-sponsor .ad{
padding:8px 0;
}
#ygrp-sponsor .ad #hd1{
font-family:Arial;
font-weight:bold;
color:#628c2a;
font-size:100%;
line-height:122%;
}
#ygrp-sponsor .ad a{
text-decoration:none;
}
#ygrp-sponsor .ad a:hover{
text-decoration:underline;
}
#ygrp-sponsor .ad p{
margin:0;
}
