1,页面元素
<window id="dropDemoWin" apply="controller.DropDemoController">
<listbox>
<listitem id="draged1111111111" draggable="true" droppable="true" onDrop="dropDemoWin$composer.onDropListitem(event)">
</listbox>
</window>
如果不知道dropDemoWin$composer怎么来的看这里【zk开发】如何在页面中获得composer对象
2,将拖放的组件添加进来 onDropListitem
public class DropDemoController extends GenericAutowireComposer {
public void onDropListitem(DropEvent event) {
if (!(event.getDragged() instanceof Listitem)) {
// ZkUtils.showError("some errors");
return;
}
// event.getDragged()获得你托动过来的组件
Listitem draggedListitem = (Listitem) event.getDragged();
// event.getTarget()是你释放鼠标,鼠标下的那个组件,即draggedListitem将要放在那个组件上,或下
Listitem targetListitem = (Listitem) event.getTarget();
// //放在目标组件之前
// targetListitem.getParent()
// .insertBefore(draggedListitem, targetListitem);
//当然你也可以放在目标组件之后
//
Component afterComp=targetListitem.getNextSibling();
//后一个组件是托过来的组件,什么都不做
if(afterComp ==draggedListitem){
return;
}
if(afterComp==null){//如果没有下一个组件说明target是最后一个,直接添加到listbox里
draggedListitem.detach();
draggedListitem.setParent(targetListitem.getParent());
}else{//注意这里的insertBefore的第二个参数
targetListitem.getParent().insertBefore(draggedListitem, afterComp);
}
}
}
分享到:
相关推荐
react-draggable - React可拖拽组件
vuegg:一个通过可视化拖拽组件的方式来生成VUE GUI原型界面
小程序 可随意拖拽组件
用于原生的拖拽组件,多功能使用,可限制范围拖拽、为自定义滚动条添加滚动条拖拽事件等
一个java swing 实现的拖拽组件 交换位置的小程序
react拖动排序组件
这是一个vue,pc端上的局部上下滚动,左右拖动单元格元素组件
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
易语言拖动一个组件到其他组件上源码,拖动一个组件到其他组件上,API_释放鼠标,API_俘获鼠标,API_WindowFromPoint,API_SetParent
Vue 拖拽组件源码
java拖拽透明组件源码 swing 中拖拽
html 非常好 jq 可拖拽布局组件 向不同方向jq 可拖拽布局组件
拖动组件的一个例子,html中使用
一个flex组件拖拽框架的例子,有实例,有源码,希望对你有帮助
分享一个拖拽的时间轴代码,多多指点。
基于Vue3的全屏拖拽上传组件 本文主要介绍了基于Vue3的全屏拖拽上传组件,分享给大家,具体如下: 知识点 浏览器拖拽 api fetch 请求 vue3 说来话长,长话短说,关于 html5 的拖拽 api 也只是做过一些拖拽...
拖动一个组件到其他组件上.rar
js拖动层事例-一定范围内拖动! 值得下载看看!资源免费,大家分享!!
基于html5 drag api实现的vue树形拖拽组件
拖动一个组件到其他组件上。@易语言代码编写例子。