Ho un widget personalizzato che è in realtà un'immagine e vorrei poterlo trascinare all'interno di un AbsolutePanel e ottenere le sue coordinate ogni volta. Vorrei utilizzare la nuova API DND di GWT 2.4, ma ho difficoltà a implementarlo. Qualcuno può proporre i passi fondamentali che devo seguire?Drag and Drop in GWT 2.4
13
A
risposta
12
La nuova API DnD introdotta con GWT 2.4 attualmente non supporta lo AbsolutePanel
(vedere le implementazioni dell'interfaccia HasAllDragAndDropHandlers
). Guardando l'implementazione di FocusPanel
non dovrebbe essere troppo difficile abilitarlo per altri pannelli.
Ecco una rapida prova di concetto su come risolvere il problema:
public void onModuleLoad() {
DragImage image = new DragImage();
image.setUrl(Resources.INSTANCE.someImage().getSafeUri());
final DropAbsolutePanel target = new DropAbsolutePanel();
target.getElement().getStyle().setBorderWidth(1.0, Unit.PX);
target.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
target.getElement().getStyle().setBorderColor("black");
target.setSize("200px", "200px");
// show drag over effect
target.addDragOverHandler(new DragOverHandler() {
@Override
public void onDragOver(DragOverEvent event) {
target.getElement().getStyle().setBackgroundColor("#ffa");
}
});
// clear drag over effect
target.addDragLeaveHandler(new DragLeaveHandler() {
@Override
public void onDragLeave(DragLeaveEvent event) {
target.getElement().getStyle().clearBackgroundColor();
}
});
// enable as drop target
target.addDropHandler(new DropHandler() {
@Override
public void onDrop(DropEvent event) {
event.preventDefault();
// not sure if the calculation is right, didn't test it really
int x = (event.getNativeEvent().getClientX() - target.getAbsoluteLeft()) + Window.getScrollLeft();
int y = (event.getNativeEvent().getClientY() - target.getAbsoluteTop()) + Window.getScrollTop();
target.getElement().getStyle().clearBackgroundColor();
Window.alert("x: " + x + ", y:" + y);
// add image with same URL as the dropped one to absolute panel at given coordinates
target.add(new Image(event.getData("text")), x, y);
}
});
RootPanel.get().add(image);
RootPanel.get().add(target);
}
E qui il pannello personalizzato
public class DropAbsolutePanel extends AbsolutePanel implements HasDropHandlers, HasDragOverHandlers,
HasDragLeaveHandlers {
@Override
public HandlerRegistration addDropHandler(DropHandler handler) {
return addBitlessDomHandler(handler, DropEvent.getType());
}
@Override
public HandlerRegistration addDragOverHandler(DragOverHandler handler) {
return addBitlessDomHandler(handler, DragOverEvent.getType());
}
@Override
public HandlerRegistration addDragLeaveHandler(DragLeaveHandler handler) {
return addBitlessDomHandler(handler, DragLeaveEvent.getType());
}
}
e classe di immagine:
public class DragImage extends Image {
public DragImage() {
super();
initDnD();
}
private void initDnD() {
// enables dragging if browser supports html5
getElement().setDraggable(Element.DRAGGABLE_TRUE);
addDragStartHandler(new DragStartHandler() {
@Override
public void onDragStart(DragStartEvent event) {
// attach image URL to drag data
event.setData("text", getUrl());
}
});
}
}
posso ci vediamo ottenere punti massicci su questa domanda ... Ben fatto! :-) –
hai provato smartgwt? – caarlos0
no smartgwt, ho iniziato una volta a usarlo e no grazie :) Uso questo sito per molto tempo, ma per dirti la verità non ho ancora trovato il tempo o la curiosità per verificare cosa quei punti e stelle significano ... –