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());
}
});
}
}
Problemi correlati
- 1. PyQt4 - Drag and Drop
- 2. ipad drag and drop
- 3. jstree move, drag and drop
- 4. drag and drop controlli winform
- 5. disable text drag and drop
- 6. HTML5 Drag and Drop effectAllowed and dropEffect
- 7. Semplice codice drag and drop
- 8. Bug in Delphi VCL Drag and Drop?
- 9. Drag and Drop di base in iOS
- 10. drag and drop non funziona in Firefox
- 11. Drag and drop righe all'interno QTableWidget
- 12. NSTableView e NSOutlineView drag-and-drop
- 13. jqGrid drag and drop column riordina
- 14. Drag and drop: jQuery UI o Scriptaculous?
- 15. Funzionalità caricamento immagine javery drag-and-drop
- 16. Drag and drop dal finder a WebView
- 17. NSTableView e drag and drop dal Finder
- 18. Drag and drop + disegno personalizzato su Android
- 19. Python Selenium WebDriver drag-and-drop
- 20. JQuery Drag and Drop problemi di posizionamento
- 21. Backbone uso semplice drag and drop
- 22. Drag and Drop + Rilevatore fiammifero non funzionante
- 23. HTML5 Drag and Drop of node
- 24. Silverlight Toolkit TreeView Drag and Drop
- 25. Drag and Drop - È possibile ottenere l'URL?
- 26. Drag-and-drop in contentEditable DIV in Firefox
- 27. drag and drop di oggetti in listview in Android?
- 28. Drag and Drop non funziona in C# Winforms Application
- 29. Come implementare il drag and drop in MahApps Metro Layout
- 30. HTML5 Drag and Drop OnDragOver non sparare in Chrome
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 ... –