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

Question

使用 jsTree 3.0.8 我想允许在树中拖放节点，但它应该只允许通过拖动特定按钮或 "drag handle" 来启动该操作，而不是允许在行中任意位置拖动的默认行为。

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

jQuery UI 在此处记录了类似的拖动手柄概念： https://jqueryui.com/draggable/#handle

这是我的树的一个节点。 "Reorder" 按钮是我希望用户能够拖动行的地方，而不是其他任何地方。

<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：使用拖动手柄来限制启动拖动

jsTree 3: use a drag handle to restrict initiating dragging

javascript

drag-and-drop

jstree

jquery-ui-draggable

jstree-dnd