Question

使用jsTree 3.0.8我想允许在树中拖放节点，但是如果它是通过拖动特定按钮或“拖动句柄”而不是默认值来启动的话允许在行上的任何位置拖动的行为。

我通过Html填充我的树，并为每个节点绘制一个工具栏作为该行的Html内容的一部分。我将委托的jQuery单击处理程序分配给工具栏项。其中一个工具栏项需要有一个移动图标，并且只允许通过拖动该工具栏按钮来移动该树项。

jQuery UI具有类似的拖动句柄概念： https://jqueryui.com/draggable/#handle

这是我树的一个节点。 “重新排序”按钮是我希望用户能够拖动行的地方，而不是其他地方。

<li data-jstree="{ 'type': 'page' }">
    <i class="jstree-icon jstree-ocl" role="presentation"></i>
    <a class="jstree-anchor" href="#" tabindex="-1" id="109_anchor">
        <i class="jstree-icon jstree-themeicon fa fa-2x fa-file font-grey-cascade jstree-themeicon-custom" role="presentation"></i>
        <div class="pull-left">
            <div class="friendly-name">test</div>
            <small>/okay/its/a/test</small>
        </div>
        <span class="nodeToolbar">
            <a title="Edit" class="passthrough btn grey-cascade btn-xs" href="/Pages/Edit/109"><i class="fa fa-pencil"></i> Edit</a>
            <a title="Preview" class="preview btn grey-cascade btn-xs" target="_pagePreview" href="/Pages/Preview/109"><i class="fa fa-eye"></i> Preview</a>
            <button title="Reorder" class="reorder btn grey-cascade btn-xs" href="#">
                <i class="fa fa-arrows"></i> Reorder
            </button>
        </span>
    </a>
</li>

我已经看过一些涉及check_callback的其他解决方案，但这似乎只是阻止了移动操作（在丢弃期间）而不是我需要的，即过滤操作开始时（启动拖动时）。

Answer 1

您可能需要使用is_draggable： http://www.jstree.com/api/#/?q=is_dragg&f= $。jstree.defaults.dnd.is_draggable

对于快速而肮脏的解决方案 - 在锚节点上侦听mousedown touchstart事件并设置一个变量，然后您可以在is_draggable检查中使用该变量：

var allow_drag = false;
$('#tree').on('mousedown touchstart', '.jstree-anchor', function (e) {
  allow_drag = e.target.className.indexOf('reorder') !== -1;
});
$('#tree').jstree({
  dnd : {
    is_draggable : function () { return allow_drag; },
    ...

jsTree 3：使用拖动手柄来限制启动拖动

1 个答案: