我有一个简单的网格控件,其中包含一些我希望能够移动的按钮。下面的代码确实有效,但实际执行拖放操作需要付出很多努力,而且不清楚丢弃的发生位置。我必须移动鼠标以达到不拒绝掉落的状态。我将不胜感激任何关于如何使这更“用户友好”的建议。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" horizontalAlign="center" height="200" width="200">
<mx:Script>
<![CDATA[
import mx.containers.GridItem;
import mx.controls.Button;
import mx.core.DragSource;
import mx.events.*;
import mx.managers.DragManager;
private function dragInit(event:MouseEvent):void
{
if(event.buttonDown)
{
var button:Button = event.currentTarget as Button;
var dragSource:DragSource = new DragSource();
dragSource.addData(button, 'button');
DragManager.doDrag(button, dragSource, event);
}
}
private function dragEnter(event:DragEvent): void
{
var target:GridItem = event.currentTarget as GridItem;
if (event.dragSource.hasFormat('button') && target.getChildren().length == 0)
{
DragManager.acceptDragDrop(target);
DragManager.showFeedback(DragManager.MOVE);
}
}
private function dragDrop(event:DragEvent): void
{
var target:GridItem = event.currentTarget as GridItem;
var button:Button = event.dragSource.dataForFormat('button') as Button;
target.addChild(button);
}
]]>
</mx:Script>
<mx:Grid>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
</mx:GridItem>
<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
</mx:GridItem>
<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
<mx:Button label="A" width="40" height="40" mouseMove="dragInit(event)"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
</mx:GridItem>
<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
<mx:Button label="B" width="40" height="40" mouseMove="dragInit(event)"/>
</mx:GridItem>
<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
<mx:Button label="C" width="40" height="40" mouseMove="dragInit(event)"/>
</mx:GridItem>
<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
</mx:GridItem>
<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:Style>
GridItem
{
borderColor: #A09999;
borderStyle: solid;
borderThickness: 2;
horizontal-align: center;
vertical-align: center;
}
Grid
{
borderColor: #A09999;
borderStyle: solid;
borderThickness: 2;
horizontalGap: 0;
verticalGap: 0;
horizontal-align: center;
vertical-align: center;
}
</mx:Style>
</mx:Application>
答案 0 :(得分:3)
看起来每个空网格项只存在于您定义的边框上(我不知道为什么会这样,可能是容器的已知功能)。如果你为每个GridItem添加一个backgroundColor,那么将在整个区域而不是那个边界上触发dragEnter。
答案 1 :(得分:0)
不幸的是,你必须处理所有这些事件。
答案 2 :(得分:0)
为Grid组件定义背景颜色。之后,您可以将按钮放在GridItem的中间。
答案 3 :(得分:0)
只需将backgroundColor
放入GridItem
:)