Wicket DND - 带表格的顶部/底部答案

【问题标题】：Wicket DND - drop top/bottom with tablesWicket DND - 带表格的顶部/底部
【发布时间】：2013-07-27 08:24:49
【问题描述】：

使用 wicket-dnd，是否可以将 dropTop() / dropBottom() 与 HTML 表格一起使用？如果是这样，选择器应该是什么？

我有一个通过 ListView 创建的 HTML 表，并且在 dropCentre("tr") 上取得了成功，但这是唯一似乎有效的删除选项。理想情况下，我想使用dropTopAndBottom() 并在表格行之间看到一个水平分隔线，指示放置目标。

更新： 这是相关代码，为简洁起见进行了简化。有问题的表格每行都有一个标签，并被添加到表单中。

    // Container class for Wicket DND
    final WebMarkupContainer dataWrapper = new WebMarkupContainer("dataWrapper");
    dataWrapper.add(new WebTheme());

    final ListView<BinaryData> data = new ListView<BinaryData>("data", list) {

        @Override
        protected void populateItem(final ListItem<BinaryData> item) {
            final BinaryData data = item.getModelObject();
            item.add(new Label("label", data.getLabel()));
        }

        @Override
        protected ListItem<BinaryData> newItem(final int index, final IModel<BinaryData> itemModel) {
            final ListItem<BinaryData> item = super.newItem(index, itemModel);
            item.setOutputMarkupId(true);
            return item;
        }
    };

    dataWrapper.add(data);
    dataWrapper.add(new DragSource(Operation.MOVE) {

        @Override
        public void onAfterDrop(final AjaxRequestTarget target, final Transfer transfer) {
        }
    }.drag("tr"));

    dataWrapper.add(new DropTarget(Operation.MOVE) {

        @Override
        public void onDrop(final AjaxRequestTarget ajaxTarget, final Transfer transfer, final Location location) {

        }
    }.dropTopAndBottom("tr"));

    form.add(dataWrapper);

还有标记：

<div wicket:id="dataWrapper">
    <table>
        <tbody>
            <tr wicket:id="data">
                <td wicket:id="label"></td>
            </tr>
        </tbody>
    </table>
</div>

我正在使用 Wicket-DND 0.6.0 和 Wicket 6.6.0。当我使用此代码拖动一行时，我会在拖动指示器中显示红十字图标。

【问题讨论】：

您的示例在这里运行良好。请创建一个快速入门并将其附加到 Github 中的问题。

标签： java drag-and-drop wicket

【解决方案1】：

wicket-dnd 使用标准 css 选择器来确定放置位置。

以下是wicket-dnd-examples中修改后的TableExample：

table.add(new DropTarget(Operation.MOVE)
{
    @Override
    public void onDrop(AjaxRequestTarget target, Transfer transfer, Location location)
            throws Reject
        // something was dropped
    {
}.dropTopAndBottom("tr");

【讨论】：

谢谢斯文；问题是这行不通。我在我的问题中添加了一些简化的代码。

【解决方案2】：

我的问题不是由 Wicket DND 引起的，而是由我的标记中对 JQuery UI 的明显冲突引用引起的（Wicket DND 不需要 JQuery UI，但在我的应用程序的其他组件中存在）。

将其替换为 WiQuery 提供的参考不再导致任何问题：

@Override
public void renderHead(final IHeaderResponse response) {
    super.renderHead(response);

    // Ensure that Wicket's jQuery library is always loaded, so we can invoke our own jQuery calls
    response.render(JavaScriptReferenceHeaderItem.forReference(getApplication().getJavaScriptLibrarySettings().getJQueryReference()));
    response.render(JavaScriptReferenceHeaderItem.forReference(CoreUIJavaScriptResourceReference.get()));
}

【讨论】：