1

I'm developing a web application using Apache Wicket 6 and WicketStuff GMap3, along with Sven Meier's wicketdnd. On the main page I have a table of items and an instance of the GMap3 widget.

I would like to be able to drag an item from the table and place it on the GMap3 widget. I can drag an item from the table onto another Ajax panel on the page (the dragged item turns from red to blue when its over a drop target) but when the same item is dragged over the GMap3 widget it stays red.

I added a DragSource to the table like this:

DefaultDataTable dataTable = new DefaultDataTable(ID_CUSTOM_TABLE, columns, new CustomDataProvider(), 5) {
                                @Override
                                protected Item newRowItem(String id, int index, IModel model) {
                                    Item item = super.newRowItem(id, index, model);
                                    item.setOutputMarkupId(true);
                                    return item;
                                }
                            };

dataTable.add(new WebTheme());
dataTable.add(new DragSource(Operation.COPY) {
                    public void onBeforeDrop(AjaxRequestTarget target, Transfer transfer) {
                        logger.info("We are before the DROP");
                    }
                    public void onAfterDrop(AjaxRequestTarget target, Transfer transfer) {
                        logger.info("we are after the DROP");
                    }
                }.drag("tr"));

final MarkupContainer ajaxPanel = new WebMarkupContainer(ID_AJAX_FORM_PANEL);
ajaxPanel.setOutputMarkupId(true);
ajaxPanel.add(dataTable);

and a Drop target to the GMap3 widget like this:

GMap map = new GMap(ID_GMAP, GMAP_TOKEN);
map.setCenter(new GLatLng(51.209096,-1.5238051));
map.setMapType(GMapType.ROADMAP);
map.setZoom(10);
map.setStreetViewControlEnabled(false);
map.setScrollWheelZoomEnabled(false);
map.setZoomControlEnabled(false);
map.setScaleControlEnabled(false);
map.setOutputMarkupId(true);
map.add(new DropTarget(Operation.COPY) {
                @Override
                public void onDrag(AjaxRequestTarget target, Location location) {
                    logger.info("Map got drag event.");
                }
                @Override
                public void onDrop(AjaxRequestTarget target, Transfer transfer, Location location) throws Reject {
                    logger.info("Map got drop event.");
                }
            }.dropCenter("div"));
final MarkupContainer ajaxMapPanel = new WebMarkupContainer(ID_AJAX_MAP_PANEL);

ajaxMapPanel.add(map);

The HTML fragment for the map is below:

<div wicket:id="map.ajaxpanel" style="width:1580px;height:680px;background:white">
    <div id="map" wicket:id="map" style="width:1580px;height:680px;background:white"/>
</div>

Has anyone solved this problem and if so, how did you do it?

Many thanks.

uvdevops
  • 93
  • 8
  • Try adding the DropTarget to the containing ajaxMapPanel instead - gmap3 might alter its div somehow so the JS drop handler gets lost. – svenmeier Sep 21 '18 at 06:31
  • I tried that too, same effect, However, if I remove the GMap3 widget from the containing `ajaxPanel` drag & drop works, so I'm starting to suspect that the GMap3 widget itself is hostile to drag & drop. I also tried swapping them around, but the GMap3 widget throws an error if you ask it to contain anything. – uvdevops Sep 21 '18 at 11:14
  • This is weird. Can you build a quickstart? – svenmeier Sep 21 '18 at 21:00
  • "quickstart" as in one of your examples on your GitHub? – uvdevops Sep 23 '18 at 13:48
  • Quick question: does the DropTarget add an ID of any kind to its target element? Is there something I can specifically look for in Firefox's debugger? – uvdevops Sep 23 '18 at 14:23
  • Yeah a https://wicket.apache.org/start/quickstart.html – svenmeier Sep 23 '18 at 17:22
  • Yes, the DropTarget writes a JS id to the element (as most Behaviors). But since it doesn't work when you add the DropTarget to a parental DIV, it seems not to be a problem with the actual element, but something nested inside it. – svenmeier Sep 23 '18 at 17:23
  • I've a quickstart downloaded and I'll wrap gradle around it (I don't use IDEs). Is there anything specific you want me to add/remove/modify in the quickstart code? – uvdevops Sep 24 '18 at 10:06
  • Just a Gmap3 with some DragTarget, so it can be debugged in the Browser. – svenmeier Sep 24 '18 at 14:06
  • I've isolated the code to just the GMap3 widget with a DropTarget added. The Inspector shows the
    holding the map has a class of `dnd-drop-target` as expected, but I've noticed that the
    elements that make up the map are set as `draggable=false`. Could this have an impact on the drag & drop capability?     – uvdevops Sep 25 '18 at 09:47
  • Also, in terms of `setOutputMarkupId()` what _exactly_ can I look for in the HTML? What does the ID look like? – uvdevops Sep 25 '18 at 10:15
  • I've just added a GMap to wicket-dnd examples and a DropTarget works just fine here. There must be something else going wrong with your quickstart. – svenmeier Sep 25 '18 at 17:51
  • Apologies for the late response (was pulled away from this). Will take a look and investigate. Many thanks for your help. :) – uvdevops Oct 24 '18 at 13:41

0 Answers0