1

Java クラスを使用して 2 つの listBox を使用して、ドラッグ アンド ドロップ機能を作成しています。2 つのシナリオを実装しました。

  1. listitem A は listitem B の一番下に追加されます
  2. B で既にリストアイテムを選択している場合、リストにアイテムをドロップすると、その場所に追加されます

私の要件は 2 に近いです。つまり、アイテム リストを事前に選択する必要はなく、A のアイテム リストをマウスがポイントするインデックスに移動する必要があります (マウス オーバー効果のように)。そのような方法が見つからないか、ListboxそのListitem場所を提供してくれます。

以下は、2の場合に機能しているコードです。

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

Listitem上記のコードでは、zul ファイルを使用しているデモ アプリケーションで発生するように、2 番目のパラメーターはマウスで強調表示されている必要があります。

前に述べたように、アイテムを B の選択した場所に移動したいと考えていますListitem。そのためには、これらの変更を 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]

現在、次のような私の Java コードは、ListitemBにアイテムをドロップしてもアクティブ化されていません。

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

listitem から droppable を削除すると、それが呼び出されます。しかし、listitem をその場所に移動するには、ここに droppable true を追加する必要があります。また、listitem は動的であるため、@wire をアタッチしてイベントを取得するための ID を与えることはできません。

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>

必要なものがすべて揃っていることを願っています。リストアイテムからドロップ可能に削除すると、正常に機能しますが、私の要件ではありません。

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 を追加します。

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

ターゲットは、これを処理する必要がListboxありListitemます。

このステップでは、予想される注文のコードも追加できます。の挿入メソッドを呼び出して、 の前または後にまたは リストの 最後に を
追加するだけです。draggedListitemuserListboxdroppedListitem
getTarget()ListboxuserListbox

編集

@Listen("onDrop = #userListbox")で聞くだけですが、 s も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);
}

これをテストしたところ、ドラッグされた要素がドロップ先の要素の前に追加されました。

于 2012-11-22T12:42:32.297 に答える