JsTree拖放 - 移动时不显示图标
JsTree drag drop - Icon not showing while moving
我有一个启用了拖放插件的 JsTree。我也在使用 angular 指令,https://github.com/ezraroi/ngJsTree.
一切正常,但是,正在移动的节点在移动时不显示。虽然拖放是有效的,但你只是看不到你在拖放什么(好像你什么也没动)。
文档似乎不需要任何特殊的东西来完成这项工作。
这是我的配置:
var typesConfig = {
'#': {
"valid_children": ["Department"],
'icon': 'fa fa-circle icon-root'
},
"Department": {
'icon': 'fa fa-circle icon-department',
"valid_children": ["Category"]
},
"Category": {
'icon': 'fa fa-circle icon-category',
"valid_children": ["Subcategory"]
},
"Subcategory": {
'icon': 'fa fa-circle icon-subcategory',
"valid_children": []
}
};
$scope.treeConfig = {
core: {
multiple: false,
animation: 200,
check_callback: true
},
dnd: {
},
types: typesConfig,
version: 1, //Used by the angular directive
plugins: ['types', 'dnd']
};
Html:
<div id="jstreeDep" class="tree-scroll" js-tree="treeConfig" ng-model="treeData" should-apply="listen()" tree-events="changed:selectionChanged; before_open:nodeOpenCallback"></div>
示例节点对象:{
"dataId":1,
"text":"Some text",
"type":"Department",
"isDeletable":true,
"sortIndex":0,
"parentId":0
}
我尝试删除所有事件,树滚动 class,从 nuget 和网站下载 jstree 库,删除类型插件,但没有任何效果。感谢任何帮助。
为了显示拖动,jsTree 创建了一个临时的 div,id 为 vakata-dnd
。您使用的库之间可能存在一些 css 冲突。尝试通过向 #vakata-dnd
添加一些非凡的样式(如最新加载的 css 中的红色 background-color 来覆盖 div 的默认样式,看看是否有帮助。
正如 Nikolay Ermakov 在这里提到的,当您使用 dnd 功能时,会创建一个带有 id="vakata-dnd"
的元素。如果 f.e,您可以直接检查此元素及其应用的所有样式。在 Chrome 中,首先使用 Elements 选项卡在单独的 window 中打开 debug window,然后开始拖动节点并按住鼠标按钮。在按住鼠标按钮的同时使用 Alt + Tab 键切换到调试 window,然后按 Tab 或 Shift + Tab 以关注 dom 元素并使用箭头在元素之间移动。 body 的底部将创建 vakata-dnd 元素,因此您可以检查所有应用的样式并找出缺少的内容。
我有一个启用了拖放插件的 JsTree。我也在使用 angular 指令,https://github.com/ezraroi/ngJsTree.
一切正常,但是,正在移动的节点在移动时不显示。虽然拖放是有效的,但你只是看不到你在拖放什么(好像你什么也没动)。
文档似乎不需要任何特殊的东西来完成这项工作。
这是我的配置:
var typesConfig = {
'#': {
"valid_children": ["Department"],
'icon': 'fa fa-circle icon-root'
},
"Department": {
'icon': 'fa fa-circle icon-department',
"valid_children": ["Category"]
},
"Category": {
'icon': 'fa fa-circle icon-category',
"valid_children": ["Subcategory"]
},
"Subcategory": {
'icon': 'fa fa-circle icon-subcategory',
"valid_children": []
}
};
$scope.treeConfig = {
core: {
multiple: false,
animation: 200,
check_callback: true
},
dnd: {
},
types: typesConfig,
version: 1, //Used by the angular directive
plugins: ['types', 'dnd']
};
Html:
<div id="jstreeDep" class="tree-scroll" js-tree="treeConfig" ng-model="treeData" should-apply="listen()" tree-events="changed:selectionChanged; before_open:nodeOpenCallback"></div>
示例节点对象:{
"dataId":1,
"text":"Some text",
"type":"Department",
"isDeletable":true,
"sortIndex":0,
"parentId":0
}
我尝试删除所有事件,树滚动 class,从 nuget 和网站下载 jstree 库,删除类型插件,但没有任何效果。感谢任何帮助。
为了显示拖动,jsTree 创建了一个临时的 div,id 为 vakata-dnd
。您使用的库之间可能存在一些 css 冲突。尝试通过向 #vakata-dnd
添加一些非凡的样式(如最新加载的 css 中的红色 background-color 来覆盖 div 的默认样式,看看是否有帮助。
正如 Nikolay Ermakov 在这里提到的,当您使用 dnd 功能时,会创建一个带有 id="vakata-dnd"
的元素。如果 f.e,您可以直接检查此元素及其应用的所有样式。在 Chrome 中,首先使用 Elements 选项卡在单独的 window 中打开 debug window,然后开始拖动节点并按住鼠标按钮。在按住鼠标按钮的同时使用 Alt + Tab 键切换到调试 window,然后按 Tab 或 Shift + Tab 以关注 dom 元素并使用箭头在元素之间移动。 body 的底部将创建 vakata-dnd 元素,因此您可以检查所有应用的样式并找出缺少的内容。