ZK 在用户界面内拖曳特定的组件

ZK 允许用户在用户界面内拖拽特定的组件.例如,文件拖拽至其它目录,或将商品拖拽至购物车,或者改变数据的顺序等.

若一个组件可以被拖拽则它是可拖拽的.若用户可以将一个可拖拽的组件放入到某一组件内,则称该组件是可放下的(droppable).

注:在放下后,ZK并不假定关于发生什么的任何行为,这由应用程序开发人员编写的onDrop事件监听器来决定.

如果应用程序什么也不做,被拖拽的组件只是简单的移回它的初始位置.

实战代码如下:

droppable="true" draggable="true"  onDrop="@command('move')" 拖拽后触发的点击事件@command('move')

<z:listitem droppable="true" draggable="true"  onDrop="@command('move')">
                            <z:listcell  >
                                <span class="drag-icon" ></span>
                            </z:listcell>
                            <z:listcell label="${each.code}"/>
                            <z:listcell label="${w:attrLabel0(each)}"/>
                            <z:listcell>
                                <div class="btn-group" if="${hik:isAllow('/attributeGroup/edit')}">
                                    <z:button class="btn-white btn btn-xs" label="${u:l('common.button.remove')}"
                                    onClick="@command('removeAttribute',this=self)">
                                        <z:custom-attributes attribute="${each}"/>
                                    </z:button>
                                </div>
                            </z:listcell>
                        </z:listitem>

后台接收代码如下

    @Command
    @SmartNotifyChange("*")
    public void move(@ContextParam(TRIGGER_EVENT) DropEvent evt) {
          int preIndex = ((Listitem) evt.getDragged()).getIndex();
          int curIndex = ((Listitem) evt.getTarget()).getIndex();

            //todo 操作数据库根据跟换这俩个字段的值
    
    }

效果图如下

移动前

移动后

ZK 在用户界面内拖曳特定的组件

猜你喜欢