Jstree move, drag and drop

Я хочу реализовать функциональность перемещения для node в jstree. Это переход, который нужно реализовать или перетащить? Алос, неплохо иметь рабочий код от привязки контейнера к событию и коду события.

Ответ 1

Вам нужно всего лишь использовать плагин dnd, если вам не нужно применять какие-либо правила перемещения (не допускайте перемещения некоторых узлов на другие узлы и т.д.). Если вам необходимо обеспечить соблюдение правил перемещения, вы можете добавить плагин crrm.

См. Изменить только демонстрацию документации dnd pluign на примере этого. Документация очень плохая, поэтому вам нужно будет использовать инструмент разработчика в своем браузере, чтобы узнать, какие свойства параметра для обратного вызова check_move. Для примера в документации m.o относится к вашим перетаскиваемым node и m.r относится к вашему пункту назначения node.

Вам также, вероятно, потребуется уведомление при перемещении node, поэтому привязка к событию move_node.jstree при инициализации дерева:

  $("#treeHost").jstree({
  ...
  }).bind("move_node.jstree", function (e, data) {
        // data.rslt.o is a list of objects that were moved
        // Inspect data using your fav dev tools to see what the properties are
        });
    })

Ответ 2

$("#demo1").jstree({
....
.bind("move_node.jstree", function (e, data) {

    /*
    requires crrm plugin

    .o - the node being moved
    .r - the reference node in the move
    .ot - the origin tree instance
    .rt - the reference tree instance
    .p - the position to move to (may be a string - "last", "first", etc)
    .cp - the calculated position to move to (always a number)
    .np - the new parent
    .oc - the original node (if there was a copy)
    .cy - boolen indicating if the move was a copy
    .cr - same as np, but if a root node is created this is -1
    .op - the former parent
    .or - the node that was previously in the position of the moved node */

    var nodeType = $(data.rslt.o).attr("rel");
    var parentType = $(data.rslt.np).attr("rel");

    if (nodeType && parentType) {
        // TODO!
    }
})
});