JsTree перетащить между двумя деревьями и ссылку?

Question

Я хочу использовать JsTree (точнее, это тот, с которым я сейчас пытаюсь), чтобы иметь 2 дерева. Вы должны иметь возможность перетаскивать узлы, но НЕ внутри дерева, только между деревьями. И узел не должен перемещаться или копироваться, он должен создавать отношения, то есть я предполагаю, что это будет достигнуто путем обратного вызова, потому что дерево не должно регистрировать отношения самостоятельно, все, что мне нужно, это получить информацию, например Детский узел A был сброшен на дочернем узле 1.

Вот что у меня есть пока что только из образцов на сайте JsTree, в основном всего два дерева дендов, что недостаточно, потому что вы не можете перетаскивать между деревьями , а также вы можете перетаскивать внутри, что опять-таки не должно быть позволено в моем случае (HTML, только что я положил его в образец страницы Bootstrap):

<div class="row"> 
     <div class="col-md-4"> 
      <h2>Heading</h2> 

      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris 
       condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis 
       euismod. Donec sed odio dui. </p> 

      <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 


      <div id="jstree"> 
       <!-- in this example the tree is populated from inline HTML --> 
       <ul> 
        <li>Root node start 
         <ul> 
          <li id="child_node_1">Child node 1</li> 
          <li>Child node 2</li> 
         </ul> 
        </li> 
        <li>Root node 2</li> 
       </ul> 
      </div> 

     </div> 
     <div class="col-md-4"> 
      <h2>Heading</h2> 

      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris 
       condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis 
       euismod. Donec sed odio dui. </p> 

      <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 

      <div id="jstree2"> 
       <!-- in this example the tree is populated from inline HTML --> 
       <ul> 
        <li>Root node start 
         <ul> 
          <li id="child_node_1_2">Child node A</li> 
          <li>Child node B</li> 
         </ul> 
        </li> 
        <li>Root node 2</li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <h2>Heading</h2> 

      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula 
       porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut 
       fermentum massa justo sit amet risus.</p> 

      <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
     </div> 
    </div> 

и в JQuery (опять же в основном из образцы):

jQuery(document).ready(function() { 

    $('#jstree').jstree({ 
     "core":{ 
      "animation":0, 
      "check_callback":true, 
      "themes":{ "stripes":true } 
     }, 
     rules:{ 
      droppable:[ "tree-drop" ], 
      multiple:true, 
      deletable:"all", 
      draggable:"all" 
     }, 
     "types":{ 
      "#":{ 
       "max_children":1, 
       "max_depth":4, 
       "valid_children":["root"] 
      }, 
      "root":{ 
       "icon":"/static/3.0.0-beta5/assets/images/tree_icon.png", 
       "valid_children":["default"] 
      }, 
      "default":{ 
       "valid_children":["default", "file"] 
      }, 
      "file":{ 
       "icon":"glyphicon glyphicon-file", 
       "valid_children":[] 
      } 
     }, 
     "plugins":[ 
      "contextmenu", "dnd", "search", 
      "state", "types", "wholerow" 
     ] 
    }); 

    $('#jstree2').jstree({ 
      "core":{ 
       "animation":0, 
       "check_callback":true, 
       "themes":{ "stripes":true } 
      }, 
      rules:{ 
       droppable:[ "tree-drop" ], 
       multiple:true, 
       deletable:"all", 
       draggable:"all" 
      }, 
      "types":{ 
       "#":{ 
        "max_children":1, 
        "max_depth":4, 
        "valid_children":["root"] 
       }, 
       "root":{ 
        "icon":"/static/3.0.0-beta5/assets/images/tree_icon.png", 
        "valid_children":["default"] 
       }, 
       "default":{ 
        "valid_children":["default", "file"] 
       }, 
       "file":{ 
        "icon":"glyphicon glyphicon-file", 
        "valid_children":[] 
       } 
      }, 
      "plugins":[ 
       "contextmenu", "dnd", "search", 
       "state", "types", "wholerow" 
      ] 
     }); 

    // bind to events triggered on the tree 
    $('#jstree').on("changed.jstree", function (e, data) { 
     console.log(data.selected); 
    }); 

}); 

Answer 1

Прежде всего - получите последний источник от github. Вы должны использовать опцию check_callback и установить его функцию, как описано здесь: http://www.jstree.com/api/#/?q=check_callback&f= $ .jstree.defaults.core.check_callback

В обратном вызове убедитесь, что вы позволяете только multitree движения (проверить аргументы, которые вы получаете в функции обратного вызова и передать их $.jstree.reference(obj/par)._id. вы бы хотели, чтобы убедиться, что родитель и узел из разных деревьев. только после этого вернуться true.

Убедитесь, что вы не допускать никаких delete_node операций, и прослушайте copy_node.jstree события на принимающем дереве - как только это срабатывает - удалите вновь скопированный узел и создайте свои отношения.

Другой способ приблизиться к этому - создать свой собственный плагин с использованием jstree.dnd.js в качестве базы. Вероятно, это будет лучше, но потребуется больше времени.