1

我正在使用 Apache Wicket 6 和WicketStuff GMap3以及 Sven Meier 的wicketdnd开发一个 Web 应用程序。在主页上，我有一个项目表和一个 GMap3 小部件的实例。

我希望能够从表中拖动一个项目并将其放在 GMap3 小部件上。我可以将表格中的一个项目拖到页面上的另一个 Ajax 面板上（拖动的项目在放置目标上方时从红色变为蓝色），但是当将相同的项目拖到 GMap3 小部件上时，它保持红色。

我向表中添加了一个 DragSource，如下所示：

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);

和 GMap3 小部件的 Drop 目标，如下所示：

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);

地图的 HTML 片段如下：

<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>

有没有人解决过这个问题，如果有，你是怎么解决的？

非常感谢。

4

0 回答 0