Flex - 防止拖动某些项目答案

【问题标题】：Flex - prevent dragging for certain itemsFlex - 防止拖动某些项目
【发布时间】：2011-01-30 10:26:26
【问题描述】：

您将如何防止拖动 List 或 DataGrid 的一些项？

假设我有一个包含两个项目的列表：“Tom”和“Jerry”。只有“Tom”应该是可拖动的，而不是“Jerry”。

理想情况下，我有一个“isDragEnabled(item:Object):Boolean”函数，该函数正在被拖动源查询。

我的困难始于“dragStart”事件处理程序的dragSource 为空值，所以从一开始我就发现很难找出drag-start 是关于什么的。..

提前致谢！

PS 有一些关于防止或取消放置的讨论，但我没有看到太多关于防止拖动启动的内容，因此提出了这个问题。

【问题讨论】：

标签： apache-flex drag-and-drop

【解决方案1】：

如果你想要避免拖动项目，你应该使用这样的东西：

<fx:Script>
    <![CDATA[
       private function onDragStart(event:DragEvent):void {
       var selectedNode:Object = itemsList.selectedItem;
       if (selectedNode is not a draggable item) {
           event.stopImmediatePropagation();
       }
    }
    ]]>
</fx:Script>

<s:List id="itemsList" dragStart="onDragStart(event)"/>

DragStart 事件在拖动开始时立即调度，因此如果您停止该事件的传播，您可以避免拖动项目。

【讨论】：

【解决方案2】：

你可以做两件事：

您可以禁用 List 中不可拖动的项目，具体取决于该 selectedItem 的数据对象的属性。这将导致它们看起来像视觉障碍，这是您可能不想要的，因此您也可以尝试...
当有效项（基于所选item的数据对象）时，您可以将列表的Dragenabled属性设置为“true”，并且当项目无效时“false”。
李>

【讨论】：

不错的选择 Robusto，您使用/测试过其中任何一个吗？ 1 看起来很简单，但在视觉上很烦人。 2 似乎可以工作，但很多看起来应该对我有用的东西却没有。
我都使用过它们，它们为我的公司工作。请注意，#1 使用 List 的 disabledFunction 属性，而 #2 从 dragDrop 事件调用处理程序，该处理程序检查行是否有效拖动，如果无效则调用 event.stopImmediatePropagation() 和 event.preventDefault() .

【解决方案3】：

好的，明白了，谢谢 Robusto，你的提示 #2 是灵感，但是我不得不使用鼠标按下的监听器——选择事件触发得太晚了。

在下面的示例中，我使用的是我的 some other question 中的代码。

此示例仅允许您拖动 List 或 DataGrid 中的第一项：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" minWidth="955" minHeight="600">

    <mx:List id="list" dataProvider="{['Tom','Jerry', 'Amy', 'Betty', 'Chris', 'Dean', 'Email', 'Floyd', 'Grant', 'Helen', 'Iris', 'Jack']}" minWidth="200"
        mouseDown="onMouseDown(event)"
        />

    <mx:DataGrid id="dg" dataProvider="{[{title:'Tom'},{title:'Jerry'}]}" minWidth="200"
         mouseDown="onMouseDown(event)" 
    >
        <mx:columns>
            <mx:DataGridColumn dataField="title" />
        </mx:columns>
    </mx:DataGrid>

    <mx:Script>
        <![CDATA[
            import mx.controls.listClasses.ListBase;
            import mx.events.DragEvent;


            protected function onMouseDown(event:MouseEvent):void
            {
                var listBaseComp:ListBase = ListBase(event.currentTarget);
                var clickIndex:int = this.findClickedItemIndex(event.stageX, event.stageY, listBaseComp);
                listBaseComp.dragEnabled = clickIndex == 0;
            }

            /**
             * Returns a dataProvider item that displays at the given coords for the given dataGrid.
             * Code provided by Stackoverflow user https://stackoverflow.com/users/165297/amarghosh,
             * thanks a lot!
             */
            protected function findClickedItemIndex(globalX:Number, globalY:Number, listComp:ListBase):int
            {
                var p1 : Point;
                var p2 : Point;
                var renderer : DisplayObject;

                for(var i:int=0; i<listComp.dataProvider.length; i++) {
                    renderer = DisplayObject(listComp.indexToItemRenderer(i));
                    if (!renderer) //item is not displayed (scroll to view it)
                        continue;
                    p1 = new Point(renderer.x, renderer.y);
                    p2 = new Point(renderer.width, renderer.height);
                    p1 = renderer.parent.localToGlobal(p1);
                    p2 = renderer.localToGlobal(p2);
                    if(globalX >= p1.x && globalX <= p2.x && globalY >= p1.y && globalY <= p2.y)
                        return i;
                }   
                return -1;
            }

        ]]>
    </mx:Script>
</mx:Application>

【讨论】：