testVue: A JavaScript repository from malmax

Реализовать в файле solution.js функцию drawNestedSetsTree(data, node), которая принимает на вход два аргумента:

data - массив из 0 или более узлов, каждый элемент которого содержит поля title (имя узла), left (левая граница) и right (правая граница). Формат хранения - Nested Sets
node - DOM-узел (можете считать что это будет div), в который надо вывести итоговую структуру в виде дерева ul и li
Элементы структуры можно перетаскивать с помощью мыши по следующей логике
- перетаскивание элемента на узел дерева размещает перетаскиваемый элемент как последнего ребенка элемента, на который перетащили узел
- двойной клик по элементу удаляет этот узел навсегда
- при попытке удаления узла, у которого есть дети, удаляется только сам узел - а его дети становятся на место текущего узла в том же месте и том же порядке где находился исходный удаленный узел
- удалять корневой узел запрещено (просто игнорировать попытку)

Функция drawNestedSetsTreeвыводит в переданный DOM-узел визуализацию дерева, которое лежит в data и возвращает на выходе некий объект, имеющий одну-единственную функцию save. К примеру для входного аргумента data равного:

[
  {
    title: "Одежда",
    left: 1,
    right: 22
  },
  {
    title: "Мужская",
    left: 2,
    right: 9
  },
  {
    title: "Женская",
    left: 10,
    right: 21
  },
  {
    title: "Костюмы",
    left: 3,
    right: 8
  },
  {
    title: "Платья",
    left: 11,
    right: 16
  },
  {
    title: "Юбки",
    left: 17,
    right: 18
  },
  {
    title: "Блузы",
    left: 19,
    right: 20
  },
  {
    title: "Брюки",
    left: 4,
    right: 5
  },
  {
    title: "Жакеты",
    left: 6,
    right: 7
  },
  {
    title: "Вечерние",
    left: 12,
    right: 13
  },
  {
    title: "Летние",
    left: 14,
    right: 15
  }
];

В узле node должен появиться следующий HTML:

<ul>
<li>Одежда
<ul>
  <li>Мужская
    <ul>
      <li>Костюмы
        <ul>
          <li>Брюки</li>
          <li>Жакеты</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Женская
    <ul>
      <li>Платья
        <ul>
          <li>Вечерние</li>
          <li>Летние</li>
        </ul>
      </li>
      <li>Юбки</li>
      <li>Блузы</li>
    </ul>
  </li>
</ul>
</li>
</ul>

Вызов функции save на возвращенном объекте, должен вернуть объект дерева в таком же формате, как исходный (nested sets) с учетом выполненных операций перетаскивания

Пример использования вашей функции:

const tree = drawNestedSetsTree(node, someData);
// дергаем дерево, таскаем в нем узлы, удаляем и т.д.
const newTree = tree.save();
// в newTree лежат новые данные

Обратите внимание на следующие ограничения:

запрещено использовать любые библиотеки
запрещено использовать любые "украшательства" - выводите голую структуру из элементов ul и li
у вас никогда не должно быть пустых элементов (без контента). Относится как к <ul> так и к <li>
в файле solution.js должна быть одна внешняя функция с именем drawNestedSetsTree. Вы можете использовать классы, отдельные функции, всё что угодно - но пожалуйста, объявляйте их внутри функции
вы можете быть уверены, что предоставленное вам дерево корректно и непротиворечиво

После выполнения задания, разместите ваше решение на gist.github.com и пришлите ссылку на ваше решение (только ссылку) по адресу illya@javascript.ninja с темой письма "Тестовое задание: ReactJS" или "Тестовое задание: VueJS". Пожалуйста, будьте внимательны с темой письма - они будут проверяться автоматически.

По истечении некоторого времени (на старте может исчисляться днями) к вам в gist придёт бот и разместит в комментариях результаты тестов. Если все тесты будут пройдены - вам будет предоставлена ссылка на оплату участия. Именно успешная оплата гарантирует место в группе (количество мест ограничено).

Подсказка: Come on, guys. Уже 2017. Никто не реализовывает drag & drop самостоятельно. Есть HTML5 API для этого ;)

malmax/testVue