jsTree 3: используйте рычаг перетаскивания, чтобы ограничить инициализацию перетаскивания

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; }, 
    ...