FineUI树控件节点拖放插件

棕榈

拖放效果参考了easyui

使用方法：
将 fineui-tree-node-drag-drop.js 文件放入项目中并引用到页面

示例代码

1. @section script{
   
2.     <script src="~/res/js/fineui-tree-node-drag-drop.js"></script>
   
3.     <script>
   
4.         F.ready(function () {
   
5.             F.ext.treeNodeDragDrop({
   
6.                 treeId: "Tree1",
   
7. 
   
8.                 // 放置之前的操作，返回值为boolean，true表示可以放置，否则不可以放置
   
9.                 // 不定义表示不对节点的拖放进行控制
   
10.                 beforeDrop: beforeDrop,
    
11. 
    
12.                 // 节点放置成功后的操作
    
13.                 afterDrop: afterDrop
    
14.             });
    
15.         });
    
16. 
    
17.         function beforeDrop(droppedData) {
    
18.             // 拖放的节点
    
19.             var dragNodeId = droppedData.dragNodeId;
    
20. 
    
21.             // 目标节点
    
22.             var targetNodeId = droppedData.targetNodeId;
    
23. 
    
24.             // 位置：before,append,after
    
25.             var position = droppedData.position;
    
26.             if (position === "append") {
    
27.                 // 允许放置
    
28.                 return true;
    
29.             }
    
30. 
    
31.             // 不允许放置
    
32.             return false;
    
33.         }
    
34. 
    
35.         function afterDrop(droppedData) {
    
36.             alert(droppedData.dragNodeId + "," + droppedData.targetNodeId + "," + droppedData.position);
    
37.         }
    
38.     </script>
    
39. }

复制代码

js文件及源码可到知识星球下载。
源码采用typescript编写，并用webpack打包

消失的键盘

亲，不知道是不是有个小BUG 。如果是从后台赋值到NodeID，如果 int，则无法实现移动的效果，也就是说 NodeID必须是带双引号的值，例如 "123"