在GWT 2.5中拖放FlexTable [英] Making a drag and drop FlexTable in GWT 2.5
本文介绍了在GWT 2.5中拖放FlexTable的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用本地GWT拖动事件来制作一个简单的拖放FlexTable，以便用户可以移动行。
//这工作正常
galleryList.getElement（）。setDraggable（Element.DRAGGABLE_TRUE）;
galleryList.addDragStartHandler（new DragStartHandler（）{
@Override
public void onDragStart（DragStartEvent event）{
event.setData（text，Hello World）;
groupList.getElement（）。getStyle（）。setBackgroundColor（＃aff）;
}
}）;
然而，我想要：
1.给出一个视觉指示器，将被丢弃。
2.找出放置行的位置，当drop事件触发时。
galleryList.addDragOverHandler（new DragOverHandler（）{
@Override
public void onDragOver（DragOverEvent event）{
// TODO：我如何获取当前位置，将一个项目放入可在此处放置的元素
}
}）;
galleryList.addDragEndHandler（new DragEndHandler（）{
@Override
public void onDragEnd（DragEndEvent event）{
// TODO：我怎么知道我在哪里在灵活的
}
}）;
我看到这些FlexTable方法在获取单元格/行时很有用：
public Cell getCellForEvent（ClickEvent event）
protected Element getEventTargetCell（Event event）
但是问题是Drag事件没有继承Event
提前致谢
解决方案
警告：我无法打开这个盒子。这是我最终制作的代码（并且适用于我） - 这是一个从FlexTable继承的Drag n Drop Widget。我检测表上的任何拖动事件，然后尝试计算鼠标悬停在FlexTable上的位置。
import com.google。 gwt.dom.client.TableRowElement;
import com.google.gwt.event.dom.client。*;
导入com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.Widget;
public class DragFlexTable extends FlexTable implements DraggableWidget {
public String dragStyle =drag-table-row;
public String dragReplaceStyle;
保护DragVerticalHandler dragFlexTableHandler;
private int currentRow;
private int [] yLocations;
private int rowBeingDragged;
DragFlexTable（）{
sinkEvents（Event.ONMOUSEOVER | Event.ONMOUSEOUT）;
getElement（）。setDraggable（Element.DRAGGABLE_TRUE）;
final DragUtil dragUtil = new DragUtil（）;
addDragStartHandler（new DragStartHandler（）{
@Override
public void onDragStart（DragStartEvent event）{
dragUtil.startVerticalDrag（event，DragFlexTable.this）;
}
}）;
$ b addDragEndHandler（new DragEndHandler（）{
@Override
public void onDragEnd（DragEndEvent event）{
dragUtil.endVerticalDrag（event，DragFlexTable.this）;
}
}）;
addDragOverHandler（new DragOverHandler（）{
$ b $ @Override
public void onDragOver（DragOverEvent event）{
dragUtil.handleVerticalDragOver（event ，DragFlexTable.this，3）;
}
}）;
}
@Override
public void onBrowserEvent（Event event）{
super.onBrowserEvent（event）;
元素td = getEventTargetCell（event）;
if（td == null）return;
元素tr = DOM.getParent（td）;
currentRow = TableRowElement.as（td.getParentElement（））。getSectionRowIndex（）;
switch（DOM.eventGetType（event））{
case Event.ONMOUSEOVER：{
//tr.addClassName(ROW_STYLE_NAME +-mouseover）;
tr.addClassName（dragStyle）;
休息;
}
case Event.ONMOUSEOUT：{
tr.removeClassName（dragStyle）;
休息;
$ b public void setDragStyle（String dragStyle）{
this.dragStyle = dragStyle;
}
@Override
public void resetDragState（）{
yLocations = null;
}
@Override
public void setRowBeingDragged（int currentRow）{
this.rowBeingDragged = currentRow;
$ b @Override
public int getDragRow（DragDropEventBase event）{
if（yLocations == null）{
yLocations = new int [getRowCount（ ）];
for（int i = 0; i< getRowCount（）; i ++）{
Widget widget = getWidget（i，0）;
if（widget.isVisible（））{
com.google.gwt.dom.client.Element imgTd = widget.getElement（）。getParentElement（）;
int absoluteBottom = imgTd.getAbsoluteBottom（）;
yLocations [i] = absoluteBottom;
} else {
yLocations [i] = -1;
}
}
}
int lastY = 0;
for（int i = 0; i< yLocations.length; i ++）{
int absoluteBottom = yLocations [i];
//不可见
if（absoluteBottom！= -1）{
int absoluteTop = lastY;
int clientY = event.getNativeEvent（）。getClientY（）;
if（absoluteBottom> clientY&& absoluteTop< clientY）{
//com.google.gwt.dom.client.Element tr = imgTd.getParentElement（）;
返回i;
}
lastY = absoluteBottom;
}
}
return currentRow;
}
@Override
public com.google.gwt.dom.client.Element getTrElement（int row）{
return getWidget（row， 0）.getElement（）getParentElement（）getParentElement（）。;
}
@Override
public DragVerticalHandler getDragFlexTableHandler（）{
return dragFlexTableHandler;
}
public void setDragReplaceStyle（String dragReplaceStyle）{
this.dragReplaceStyle = dragReplaceStyle;
}
@Override
public int getRowBeingDragged（）{
return rowBeingDragged;
}
@Override
public String getDragReplaceStyle（）{
return dragReplaceStyle;
}
public void setDragFlexTableHandler（DragVerticalHandler dragFlexTableHandler）{
this.dragFlexTableHandler = dragFlexTableHandler;
}
}
这是它使用的util类
import com.google.gwt.event.dom.client.DragEndEvent;
import com.google.gwt.event.dom.client.DragOverEvent;
import com.google.gwt.event.dom.client.DragStartEvent;
import com.google.gwt.user.client.ui.Image;
public class DragUtil {
private int alternateIgnoreEvent = 0;
private int lastDragRow = -1;
public void startVerticalDrag（DragStartEvent event，DraggableWidget widget）{
widget.resetDragState（）;
//必需
event.setData（text，dragging）;
int currentRow = widget.getDragRow（event）;
widget.setRowBeingDragged（currentRow）;
if（widget.getDragFlexTableHandler（）！= null）{
Image thumbnailImg = widget.getDragFlexTableHandler（）。getImage（currentRow）;
if（thumbnailImg！= null）{
event.getDataTransfer（）。setDragImage（thumbnailImg.getElement（），-10，-10）;
$ b public void handleVerticalDragOver（DragOverEvent event，DraggableWidget widgets，int sensitivity）{
if（alternateIgnoreEvent ++％sensitivity！= 0） {
//许多事件触发，因为每个像素都会移动，这会降低浏览器的速度，所以不理睬一些
return;
}
int dragRow = widgets.getDragRow（event）;
if（dragRow！= lastDragRow）{
com.google.gwt.dom.client.Element dragOverTr = widgets.getTrElement（dragRow）;
if（lastDragRow！= -1）{
com.google.gwt.dom.client.Element lastTr = widgets.getTrElement（lastDragRow）;
lastTr.removeClassName（widgets.getDragReplaceStyle（））;
}
lastDragRow = dragRow;
dragOverTr.addClassName（widgets.getDragReplaceStyle（））;
public void endVerticalDrag（DragEndEvent事件，DraggableWidget小部件）{
int newRowPosition = widgets.getDragRow（event）;
//清理最后的位置
if（newRowPosition！= lastDragRow）{
com.google.gwt.dom.client.Element lastTr = widgets.getTrElement（lastDragRow）;
lastTr.removeClassName（widgets.getDragReplaceStyle（））;
}
if（newRowPosition！= widgets.getRowBeingDragged（））{
com.google.gwt.dom.client.Element dragOverTr = widgets.getTrElement（newRowPosition）;
dragOverTr.removeClassName（widgets.getDragReplaceStyle（））;
widgets.getDragFlexTableHandler（）。moveRow（widgets.getRowBeingDragged（），newRowPosition）;
$ / code $ / pre
$ b $ p在uibinder中，它像这样：
< adminDnd：DragFlexTable ui：field ='itemFlexTable'styleName ='{style.table}'cellSpacing ='0'
cellPadding ='0'
dragStyle ='{style.drag-table-row-mouseover}'
dragReplaceStyle ='{style.drag-replace-table-row} '
/>
I'm trying to make a simple Drag and Drop FlexTable using native GWT drag events to allow the user to move rows around.
//This works fine
galleryList.getElement().setDraggable(Element.DRAGGABLE_TRUE);
galleryList.addDragStartHandler(new DragStartHandler() {
@Override
public void onDragStart(DragStartEvent event) {
event.setData("text", "Hello World");
groupList.getElement().getStyle().setBackgroundColor("#aff");
}
});
However, I'd like to:
1. Give a visual indicator where the item will be dropped.
2. Work out where i should drop the row, when the drop event fires.
galleryList.addDragOverHandler(new DragOverHandler() {
@Override
public void onDragOver(DragOverEvent event) {
//TODO: How do i get the current location one would drop an item into a flextable here
}
});
galleryList.addDragEndHandler(new DragEndHandler() {
@Override
public void onDragEnd(DragEndEvent event) {
//TODO: How do i know where i am in the flextable
}
});
I see these FlexTable methods are useful in getting a cell/row:
public Cell getCellForEvent(ClickEvent event)
protected Element getEventTargetCell(Event event)
But the problem is the Drag events do not inherit of Event
Thanks in advance
解决方案 Caveat: I cant gaurentee this will work out the box. This is the code I ended up making (And works for me) - it's a Drag n Drop Widget which inherits from FlexTable. I detect any drag events on the table, and then try compute where the mouse is over that FlexTable.
import com.google.gwt.dom.client.TableRowElement;
import com.google.gwt.event.dom.client.*;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.Widget;
public class DragFlexTable extends FlexTable implements DraggableWidget {
public String dragStyle = "drag-table-row";
public String dragReplaceStyle;
protected DragVerticalHandler dragFlexTableHandler;
private int currentRow;
private int[] yLocations;
private int rowBeingDragged;
DragFlexTable() {
sinkEvents(Event.ONMOUSEOVER | Event.ONMOUSEOUT);
getElement().setDraggable(Element.DRAGGABLE_TRUE);
final DragUtil dragUtil = new DragUtil();
addDragStartHandler(new DragStartHandler() {
@Override
public void onDragStart(DragStartEvent event) {
dragUtil.startVerticalDrag(event, DragFlexTable.this);
}
});
addDragEndHandler(new DragEndHandler() {
@Override
public void onDragEnd(DragEndEvent event) {
dragUtil.endVerticalDrag(event, DragFlexTable.this);
}
});
addDragOverHandler(new DragOverHandler() {
@Override
public void onDragOver(DragOverEvent event) {
dragUtil.handleVerticalDragOver(event, DragFlexTable.this, 3);
}
});
}
@Override
public void onBrowserEvent(Event event) {
super.onBrowserEvent(event);
Element td = getEventTargetCell(event);
if (td == null) return;
Element tr = DOM.getParent(td);
currentRow = TableRowElement.as(td.getParentElement()).getSectionRowIndex();
switch (DOM.eventGetType(event)) {
case Event.ONMOUSEOVER: {
//tr.addClassName(ROW_STYLE_NAME + "-mouseover");
tr.addClassName(dragStyle);
break;
}
case Event.ONMOUSEOUT: {
tr.removeClassName(dragStyle);
break;
}
}
}
public void setDragStyle(String dragStyle) {
this.dragStyle = dragStyle;
}
@Override
public void resetDragState() {
yLocations = null;
}
@Override
public void setRowBeingDragged(int currentRow) {
this.rowBeingDragged = currentRow;
}
@Override
public int getDragRow(DragDropEventBase event) {
if (yLocations == null) {
yLocations = new int[getRowCount()];
for (int i = 0; i < getRowCount(); i++) {
Widget widget = getWidget(i, 0);
if (widget.isVisible()) {
com.google.gwt.dom.client.Element imgTd = widget.getElement().getParentElement();
int absoluteBottom = imgTd.getAbsoluteBottom();
yLocations[i] = absoluteBottom;
} else {
yLocations[i] = -1;
}
}
}
int lastY = 0;
for (int i = 0; i < yLocations.length; i++) {
int absoluteBottom = yLocations[i];
//invisible
if (absoluteBottom != -1) {
int absoluteTop = lastY;
int clientY = event.getNativeEvent().getClientY();
if (absoluteBottom > clientY && absoluteTop < clientY) {
//com.google.gwt.dom.client.Element tr = imgTd.getParentElement();
return i;
}
lastY = absoluteBottom;
}
}
return currentRow;
}
@Override
public com.google.gwt.dom.client.Element getTrElement(int row) {
return getWidget(row, 0).getElement().getParentElement().getParentElement();
}
@Override
public DragVerticalHandler getDragFlexTableHandler() {
return dragFlexTableHandler;
}
public void setDragReplaceStyle(String dragReplaceStyle) {
this.dragReplaceStyle = dragReplaceStyle;
}
@Override
public int getRowBeingDragged() {
return rowBeingDragged;
}
@Override
public String getDragReplaceStyle() {
return dragReplaceStyle;
}
public void setDragFlexTableHandler(DragVerticalHandler dragFlexTableHandler) {
this.dragFlexTableHandler = dragFlexTableHandler;
}
}
This is util class which it uses
import com.google.gwt.event.dom.client.DragEndEvent;
import com.google.gwt.event.dom.client.DragOverEvent;
import com.google.gwt.event.dom.client.DragStartEvent;
import com.google.gwt.user.client.ui.Image;
public class DragUtil {
private int alternateIgnoreEvent = 0;
private int lastDragRow = -1;
public void startVerticalDrag(DragStartEvent event, DraggableWidget widget) {
widget.resetDragState();
//Required
event.setData("text", "dragging");
int currentRow = widget.getDragRow(event);
widget.setRowBeingDragged(currentRow);
if (widget.getDragFlexTableHandler()!=null) {
Image thumbnailImg = widget.getDragFlexTableHandler().getImage(currentRow);
if (thumbnailImg!=null) {
event.getDataTransfer().setDragImage(thumbnailImg.getElement(), -10, -10);
}
}
}
public void handleVerticalDragOver(DragOverEvent event, DraggableWidget widgets, int sensitivity) {
if (alternateIgnoreEvent++ % sensitivity != 0) {
//many events fire, for every pixel move, which slow the browser, so ill ignore some
return;
}
int dragRow = widgets.getDragRow(event);
if (dragRow != lastDragRow) {
com.google.gwt.dom.client.Element dragOverTr = widgets.getTrElement(dragRow);
if (lastDragRow != -1) {
com.google.gwt.dom.client.Element lastTr = widgets.getTrElement(lastDragRow);
lastTr.removeClassName(widgets.getDragReplaceStyle());
}
lastDragRow = dragRow;
dragOverTr.addClassName(widgets.getDragReplaceStyle());
}
}
public void endVerticalDrag(DragEndEvent event, DraggableWidget widgets) {
int newRowPosition = widgets.getDragRow(event);
//cleanup last position
if (newRowPosition != lastDragRow) {
com.google.gwt.dom.client.Element lastTr = widgets.getTrElement(lastDragRow);
lastTr.removeClassName(widgets.getDragReplaceStyle());
}
if (newRowPosition != widgets.getRowBeingDragged()) {
com.google.gwt.dom.client.Element dragOverTr = widgets.getTrElement(newRowPosition);
dragOverTr.removeClassName(widgets.getDragReplaceStyle());
widgets.getDragFlexTableHandler().moveRow(widgets.getRowBeingDragged(), newRowPosition);
}
}
}
In the uibinder I then use it like this:
<adminDnd:DragFlexTable ui:field='itemFlexTable' styleName='{style.table}' cellSpacing='0'
cellPadding='0'
dragStyle='{style.drag-table-row-mouseover}'
dragReplaceStyle='{style.drag-replace-table-row}'
/>
这篇关于在GWT 2.5中拖放FlexTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
