首页 > 其他分享 >GXT之旅:第八章:Portal&Drag-Drop——拖拽(Drag-Drop)基本介绍

GXT之旅:第八章:Portal&Drag-Drop——拖拽(Drag-Drop)基本介绍

时间:2022-12-06 11:07:24浏览次数:40  
标签:Draggable Drop DNDEvent event GXT Drag DropTarget 拖拽 DragSource


Drag-Drop

拖拽是GXt另外一个内建的有用的功能。正如GXT的其他功能一样,拖拽功能更接近桌面应用程序的特点。


GXT的大多数components都支持拖拽功能,但是想要使用此功能,必须实现Draggable。


Draggable

Draggable类是用来给任何的components增加拖拽功能用的。使用起来很简单,比如我们像让一个Button是可被拖拽的,我们会有如下操作:



Button dragButton = new Button("Draggable Button");
Draggable draggaable = new Draggable(dragButton);

现在dragButton就可以被拖拽了。新的安放地点会以蓝色的虚线框,随着鼠标显示出来。

GXT之旅:第八章:Portal&Drag-Drop——拖拽(Drag-Drop)基本介绍_button

默认情况,dragButton(一个有被拖拽能力的component)可以被拖拽到任何地方。当然,我们可以通过setConstrainVertical()和setConstrainHorizontal()方法,去设置禁止横向或纵向移动。

Button dragButton = new Button("Draggable Button");
Draggable draggable = new Draggable(dragButton);
draggable.setConstrainVertical(true);


DragSource

DragSource像是一个容器的概念,其里面的objects都可以被拖拽出去。


其容器里面的objects也可以被移动或者复制出来。当然也可以通过设置,其objects只允许可以被拖拽到哪里去。

当用户正在拖拽某一个component的时候,DNDEvent事件就会被自动触发传入到onDragStart()方法里。我们可以利用这一点,在DragSource新建实例的时候,Override DragSource.onDragStart(DNDEvent event)方法,用DNDEvent.setData()来设置object

DragSource source = new DragSource(component) {
@Override
protected void onDragStart(DNDEvent event) {
event.setData(component);
}
};

已经实现DragSource的components

几乎所有data-backed components(Grid, ListView, TreeGrid, TreePanel)已经实现了DragSource功能,并且都支持单选和多选的功能。


如下是他们之间的实现关系

Grid

GridDragSource

ListView

ListViewDragSource

TreeGrid

TreeGridDragSource

TreePanel

TreePanelDragSource

DropTarget

DropTarget也像是一个容易的概念,外面的components都可以被拖拽进来。DropTarget可以设置,只允许接收从哪里来的objects。


一个DropTarget会负责一连串的事情——首先,判断当前正在被拖动的object是否被允许拖入进来;并且会有可视化的指示标记。

当有object被拖入进来的时候,DNDEvent事件就会被自动触发传入到onDragDrop()方法里。我们可以利用这一点,在DropTarget新建实例的时候,Override DropTarget.onDragDrop(DNDEvent event)方法,通过DNDEvent.getData()来获得object。

DropTarget target = new DropTarget(component) {
@Override
protected void onDragDrop(DNDEvent event) {
super.onDragDrop(event);
Object data = event.getData();
}

DND.Operation枚举了两种移动方式:COPY , MOVE。MOVE是默认的移动方式——意味着object被拖拽出来之后,在DragSource里再找不到其object。

target.setOperation(DND.Operation.MOVE);


已经实现DropTarget的components

正如DragSource一样:Grid, ListView, TreeGrid, TreePanel已经是现成的实现了DropTarget的类


Grid

GridDropTarget

ListView

ListViewDropTarget

TreeGrid

TreeGridDropTarget

TreePanel

TreePanelDropTarget

分组

DragSource和DropTarget都可以来设置group,其目的是约束用户:哪些位置是拖拽进入,那些位置可以拖拽出去。这样一来,就会很有效的避免用户误操作——将不识别的类型object,拖入进来。


简单的实现方式是:调用setGroup(),传入一个String类型的参数去指定DragSource和DropTarget是在同一个组内。当一个DropTarget设置好group之后,那么他就会接收同一个group的DregSource的object。






标签:Draggable,Drop,DNDEvent,event,GXT,Drag,DropTarget,拖拽,DragSource
From: https://blog.51cto.com/u_15903664/5915140

相关文章