1

我正在使用两个使用 java 类的 listBox 编写拖放功能。我已经实现了两个场景。

  1. 列表项 A 添加到列表项 B 的底部
  2. 如果我已经在 B 中选择了一个列表项，当我将项目放入列表中时，它会添加到该位置

我的要求更接近2。即我不必预先选择项目列表，并且应该将A中的项目列表移动到鼠标指向的索引处（如鼠标悬停效果）。我找不到任何这样的方法，Listbox或者Listitem可以给我那个位置。

以下是在 2 的情况下工作的代码。

droppedListbox.insertBefore(draggedListitem, droppedListbox.getSelectedItem());

在上面的代码中，第二个参数应该是在Listitem使用 zul 文件的演示应用程序中突出显示的鼠标。

正如我之前提到的，我想将项目移动到ListitemB 中的选定位置。为此，我必须在我的 zul 文件中进行这些更改。

<listbox id="adminListbox" droppable="true" draggable="true" model="${win$composer.systemAdminListModel}" width="330px" height="100%" oddRowSclass="non-odd">
.
.
.
<template name="model">
<listitem draggable="true" droppable="true">
<listcell label="${each.id}" ></listcell>
<listcell label="${each.name}" ></listcell>
<listcell label="${each.role}" ></listcell>
</listitem>
</template> [added dropable to listitem]

Listitem现在，在将项目放在B上时，我的 java 代码如下所示：

@Listen("onDrop = #userListbox")
public void onDragDropUserListitem(){
}

如果我从 listitem 中删除 droppable，那么它就会被调用。但是要将列表项移动到该位置，我必须在此处添加 droppable true。我还要提到 listitem 是动态的，所以我不能给它一个 id 来附加 @wire 并获取它的事件。

我想知道如何在 java 中获取 listitem 上的事件，以便我可以对其执行任何操作。在当前的情况下，我的事件“onDrop”没有被调用。

这是事件方法

@Listen("onDrop = #userListbox")
public void onDragDropUserListitem(DropEvent dropEvent){

    userListbox.addEventListener("onDrop", new EventListener<Event>() {
        @Override
        public void onEvent(Event event) throws Exception {

            Listbox droppedListbox = (Listbox)(((DropEvent)event).getTarget());
            Listitem draggedListitem = (Listitem)((DropEvent)event).getDragged();

            if (draggedListitem instanceof Listitem) {    
                droppedListbox.insertBefore(draggedListitem, droppedListbox.getNextSibling());
            } else {
                droppedListbox.appendChild(draggedListitem);
            }
        }
    });
}

这是zul完整的组件

<listbox id="userListbox"  droppable="true" model="${win$composer.systemUserListModel}"  width="330px" height="100%" oddRowSclass="non-odd">
    <listhead>
        <listheader label="User ID" align="center" />
        <listheader label="User Name" align="center" />
        <listheader label="User Role" align="center" />
    </listhead>
    <template name="model">
        <listitem draggable="true" droppable="true" >
            <listcell label="${each.id}" />
            <listcell label="${each.name}" />
            <listcell label="${each.role}" />
        </listitem>
    </template>
</listbox>

我希望它是你所需要的，如果你从 listitem 中删除，它可以正常工作，但不是我的要求。

4

1 回答 1

2

好的，第一个问题是

@Listen("onDrop = #userListbox")
public void onDragDropUserListitem(DropEvent dropEvent){

    userListbox.addEventListener("onDrop", new EventListener<Event>() {

        @Override
        public void onEvent(Event event) throws Exception {

在此代码中，每次删除时都添加一个 EventListener，因为您在 EventListener 中添加了一个 EventListener。

@Listen("onDrop = #userListbox")
public void onDragDropUserListitem(DropEvent dropEvent){
      Listbox droppedListbox = (Listbox)dropEvent.getTarget());
      Listitem draggedListitem = (Listitem)dropEvent.getDragged();

            if (draggedListitem instanceof Listitem) {

                droppedListbox.insertBefore(draggedListitem, droppedListbox.getNextSibling());

            }else{
                droppedListbox.appendChild(draggedListitem);
            }

}

这应该会更好。

接下来是，我没有看到任何apply="ComposerName"我希望这样做的东西。
如果您在更高级别的组件中这样做，最好
在. 单击此处查看操作方法。 但是现在，这段代码有问题=@Listen("onDrop = #userListbox")

Listbox droppedListbox = (Listbox)dropEvent.getTarget();
Listitem draggedListitem = (Listitem)dropEvent.getDragged();

因为 traget 可以和你应该处理的Listbox一样Listitem。

在此步骤中，您也可以为您的预期订单添加代码。
只需通过调用 的插入draggedListitem方法userListbox，将droppedListitem
getTarget()ListboxuserListbox

编辑

但是@Listen("onDrop = #userListbox")只听s Listbox，但我们也想听Listitems。

您的最终代码可能如下所示

@Listen("onDrop = #userListbox")
public void onDragDropUserListbox(DropEvent dropEvent) {
    userListbox.appendChild(dropEvent.getTarget());
}

@Listen("onDrop = listitem")
public void onDragDropUserListitem(DropEvent dropEvent) {
    Listitem droppedListitem = (Listitem) dropEvent.getTarget();
    Listitem draggedListitem = (Listitem) dropEvent.getDragged();

    userListbox.insertBefore(draggedListitem, droppedListitem);
}

我已经对此进行了测试，它在拖放到的元素之前添加了拖动的元素。

于 2012-11-22T12:42:32.297 回答