Question

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

列表项目A添加在listitem B的底部
如果我已经在B中选择了一个listitem，那么当我放入该项目时列表，它是在该位置添加的

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

以下是2的情况下的代码。

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

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

正如我之前提到的，我想将项目移动到Listitem B中的选定位置。为此，我必须将这些更改转换为我的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，那么它就被调用了。但是要将listitem移动到该位置，我必须在这里添加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删除，droppable，它工作正常，但不是我的要求。

Answer 1

好的，第一个问题是

@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")之后添加组件的完整路径。
Klick here了解如何执行此操作但是现在，这段代码是个问题

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

cos traget可以Listbox以及Listitem你应该处理这个。

在此步骤中，您还可以添加预期订单的代码只需在draggedListitem之前或之后将userListbox添加到droppedListitem 如果getTarget()为Listbox，则在列表的末尾，通过调用userListbox的插入方法。

修改

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

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

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

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

如何在zk框架中的listbox的listitem上获取拖放事件

1 个答案:

修改