使用引导树视图扩展节点后可拖动属性丢失
Posted
技术标签:
【中文标题】使用引导树视图扩展节点后可拖动属性丢失【英文标题】：Draggable property lost after expanding node with bootstrap-treeview 【发布时间】：2018-04-21 07:07:49 【问题描述】：我正在尝试为 Web 应用程序开发一个小部件，用户可以在其中将项目从分层列表拖放到 div 中。对于列表，我使用众所周知的bootstrap-treeview plugin 和拖放功能 JQuery UI 可拖放功能。
页面加载后效果很好，可以拖动列表中的项目。但是，只要我展开其中一个列表项，就不能再拖动它们了。
我尝试使用 expandNode 事件侦听器重新添加可拖动句柄，但它不起作用。我还检查了事件是否被触发，但由于某种原因，可拖动条件没有再次附加到列表项。
您可以检查在this JSFiddle 中重现错误的最小代码。
知道我做错了什么吗？
为了完整起见，下面是所有代码。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" type="text/javascript"></script>
<style>
.item-list
height: 8em;
color: black;
.droppable-area
height: 8em;
outline: 2px dashed blue;
</style>
</head>
<body>
<div class="container">
<div class="row">
<p>
Item list:
</p>
</div>
<div class="row">
<div class="col-md-6" id="item-list">
</div>
<div class="col-md-6 droppable-area">
</div>
</div>
</div>
</body>
<script type="text/javascript">
var enableDraggables = function(event, data)
$(".node-item-list").draggable(
opacity: 0.7,
helper: "clone",
revert: true
);
return true;
;
var itemTree = [
text: "item 1", nodes:[text: "subitem 1-1",text: "subitem 1-2"],
text: "item 2", nodes:[text: "subitem 2-1",text: "subitem 2-2",text: "subitem 2-3"],
text: "item 3"
];
$("#item-list").treeview(
data: itemTree,
expandIcon: "glyphicon glyphicon-chevron-right",
collapseIcon: "glyphicon glyphicon-chevron-down",
onNodeSelected: enableDraggables,
onNodeUnselected: enableDraggables,
onNodeChecked: enableDraggables,
onNodeUnchecked: enableDraggables,
onNodeCollapsed: enableDraggables,
onNodeExpanded: enableDraggables
);
$("#item-list").treeview('collapseAll',
silent: true
);
enableDraggables();
$(".droppable-area").droppable(
accept: ".node-item-list"
);
</script>
</html>
【问题讨论】：
【参考方案1】：bootstrap-treeview 每次展开或折叠节点时都会破坏并重新构建树，这会删除draggable 添加的类。
为了在渲染树后在每个节点上保留 ui-draggable 和 ui-draggable-handle 类，您必须在 bootstrap-treeview 插件中编辑 Tree.prototype.template 项目模板以包含这些类：
Tree.prototype.template =
...
item: '<li class="list-group-item ui-draggable ui-draggable-handle"></li>',
...
;
更新：
根据您的评论，您应该能够通过检查nodes 或level 属性将Tree.prototype.buildTree 函数修改为仅将ui-draggable 类应用于项目。您必须定义约束是什么。
var treeItem = $(_this.template.item)
.addClass('node-' + _this.elementId)
.addClass(level === 1 ? 'ui-draggable' : '') // modify this line as needed
...
【讨论】：
有趣的解决方案，似乎解决了问题。然而，它有两个缺点。首先，我必须修改库，其次，使所有节点都可拖动，我只需要叶节点可拖动。第一个缺点是我可以忍受的，但第二个是我需要解决的问题。 谢谢杰森。最后，我使用了您的解决方案的略微修改形式，但基本上它有效。【参考方案2】：我也无法解决您的问题。我的猜测是这两个插件都不兼容。您可以尝试使用另一个插件，例如 https://github.com/mar10/fancytree，它结合了拖放和树视图。
【讨论】：
以上是关于使用引导树视图扩展节点后可拖动属性丢失的主要内容，如果未能解决你的问题，请参考以下文章