版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40646143/article/details/83746725
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 操作数据库根据跟换这俩个字段的值
}
效果图如下
移动前
移动后