2013-07-27 63 views
1

使用wicket-dnd,是否可以在HTML表格中使用dropTop()/dropBottom()?如果是這樣,選擇者應該是什麼?Wicket DND - 使用表格放置頂部/底部

我有一個通過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。當使用此代碼拖動一行時,我會在拖動指示器中顯示紅色十字圖標。

+0

你舉的例子正常工作在這裏。請創建一個快速入門將它附加到Github中的問題。 – svenmeier

回答

0

我的問題不是由檢票DND而是由一個顯然矛盾的參考JQuery的UI在我的標記引起的(JQuery用戶界面不Wicket DND是必需的,但是用於我的應用程序的其他組件)。

任何問題與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())); 
} 
0

wicket-dnd使用標準的css選擇器來確定放置位置。

以下是在檢票DND-例子修改TableExample:

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

謝謝Sven;問題是這不起作用。我爲我的問題添加了一些簡化的代碼。 – nullPainter