Wicket DND - drop top/bottom with tables

Question

With wicket-dnd, is it possible to use dropTop() / dropBottom() with HTML tables? If so, what should the selector be?

I have an HTML table created via a ListView and have had success with dropCentre("tr"), but this is the only drop option that appears to work. Ideally, I would like to use dropTopAndBottom() and see a horizontal divider between table rows which indicates the drop target.

Update: Here's the relevant code, simplified for for brevity. The table in question has a label per row and is added to a form.

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

And the markup:

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

I am using Wicket-DND 0.6.0 and Wicket 6.6.0. When I drag a row using this code, I get the red cross icon displaying in the drag indicator.

Answer 1

wicket-dnd uses standard css selectors to determine drop locations.

The following is the modified TableExample in wicket-dnd-examples:

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

Answer 2

My problem was caused not by Wicket DND but by a apparently conflicting reference to JQuery UI in my markup (JQuery UI isn't required for Wicket DND, but was present for other components of my application).

Replacing this with a WiQuery-provided reference no longer results in any issues:

@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()));
}