Flex Grid控件中如何实现拖放？答案

【问题标题】：How to implement drag and drop in Flex Grid control?Flex Grid控件中如何实现拖放？
【发布时间】：2009-02-16 03:34:29
【问题描述】：

我有一个简单的 Grid 控件，其中包含一些我希望能够四处移动的按钮。下面的代码确实有效，但实际进行拖放需要付出很多努力，并且不清楚拖放会发生在哪里。我必须移动鼠标很多才能达到不拒绝丢弃的状态。对于如何使其更加“用户友好”的任何建议，我将不胜感激。


<?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>

【问题讨论】：

标签： apache-flex drag-and-drop flex-mx

【解决方案1】：

看起来每个空网格项仅存在于您定义的边框上（我不确定这是为什么，可能是容器的已知功能）。如果您为每个 GridItem 添加一个 backgroundColor，则 dragEnter 将在整个区域而不是仅在该边框上触发。

【讨论】：

谢谢！设置背景颜色确实可以解决问题。我很好奇你是这样的:-)

【解决方案2】：

不幸的是，您必须处理所有这些事件。

【讨论】：

【解决方案3】：

为 Grid 组件定义背景颜色。之后，您可以将按钮放在 GridItem 的中间。

【讨论】：

【解决方案4】：

只需将backgroundColor 放入您的GridItem :)

【讨论】：