сортируемый, связанный с причудливым деревом, забывает свою позицию при перетаскивании - PullRequest
Новая
       49

сортируемый, связанный с причудливым деревом, забывает свою позицию при перетаскивании

0 голосов
/ 24 июня 2018

Я пытаюсь подключить необычное дерево и JQueryUI сортируемое определенным образом, так что возможно следующее:

  1. узлы причудливого дерева могут быть переставлены внутри дерева причудливого
  2. сортируемые элементы могут быть переставлены внутри сортируемой
  3. Необычный узел дерева можно отбросить на сортируемый как клон, а
  4. Сортируемый предмет можно бросить на необычное дерево в качестве клона, чтобы создать новый узел необычного дерева.

Код, который я имею, делает все это прямо сейчас, с одной проблемой, с которой у меня возникают проблемы; когда я перетаскиваю сортируемый узел к причудливому дереву, он не сохраняет свою позицию в сортируемом узле; он движется до конца.

То, что я ищу, так это: именно то поведение, которое отображается в этом примере кода, но при перетаскивании из сортируемого в необычное дерево сортируемый элемент сохраняет свое место.

Вот скрипка с моим кодом:

А вот и сам код (идентичный скрипке, может быть, кто-то спасет клик ...): 

<html>
    <head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script
        src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
         integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
         crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all-deps.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all.min.js"></script>
    </head>
    <body>
    <div id="tree"></div>

    <ul id="mylist">
        <li class="ui-state-default tonga">Item 1</li>
        <li class="ui-state-default tonga">Item 2</li>
        <li class="ui-state-default tonga">Item 3</li>
        <li class="ui-state-default tonga">Item 4</li>
        <li class="ui-state-default tonga">Item 5</li>
        <li class="ui-state-default tonga">Item 6</li>
        <li class="ui-state-default tonga">Item 7</li>
    </ul>

    <script type="text/javascript">
     $(function(){  // on page load
         $("#tree").fancytree({
         debugLevel: 0,
         selectMode: 1,
         extensions: ["dnd"],
         source: [
             {title: "Node 1", key: "1", "baloney": 44},
             {title: "Folder 2", key: "2", folder: true, children: [
             {title: "Node 2.1", key: "3", myOwnAttr: "abc"},
             {title: "Node 2.2", key: "4"}
             ]}
         ],
         dnd: {
             dragStart: function(node, data) {
             return true;
             },
             dragEnter: function(node, data) {
             return true;
             },
             dragDrop: function(node, data) {
             if ( !data.otherNode ) {
                 // it's a draggable from outside the fancytree
                 node.addNode({title: "Hello butt"}, data.hitMode);
                 return;
             } else {
                 // SOLUTION: this line enables reorder inside tree
                 data.otherNode.moveTo(node, data.hitMode);
             }
             },
             initHelper: function(sourceNode, data) {
             var helper = data.ui.helper;
             var foo = $(helper).find(".fancytree-title")[0].innerHTML;
             $(helper).find(".fancytree-drag-helper-img").remove();
             $(helper).find(".fancytree-title").replaceWith('<li class="ui-state-default tonga">'+foo+"</li>");
             },
             updateHelper: function(sourceNode, data) {
             },
             draggable: {
             appendTo: "body",
             connectToSortable: "#mylist",
             revert: "invalid",
             containment: "document"
             }
         },
         });

         $("#mylist").sortable(
         {
             connectWith: "#mylist",
             //containment: "parent"
         }
         ).disableSelection();

         $(".tonga").draggable({
         revert: true,
         helper: "clone",
         connectToFancytree: true
         });

         $(".tonga").draggable({
         revert: false,
         helper: "original",
         connectToSortable: "#mylist"
         });
     });
    </script>

    </body>
</html>

1 Ответ

0 голосов
/ 27 июня 2018

Я думаю, я понял это.Нужно переработать несколько вещей.

Во-первых, необходимо обработать событие out сортируемого объекта, чтобы сохранить, был ли предмет наркотиком вне границ сортируемого, что для некоторыхПричина переупорядочивает список: 

$("#mylist").sortable({
  connectWith: "#mylist",
  out: function(event, ui) {
    // store the original index of the sortable item only if we are moving the mouse (extra events fire which mess this up)
    if (event.originalEvent.type === "mousemove") {
      $(ui.item).data('drugout', true);
    }
  }
}).disableSelection();

Затем к перетаскиваемому элементу необходимо добавить несколько прослушивателей событий.Обработчик start хранит исходный индекс перетаскиваемого элемента.Обработчик stop определяет, был ли предмет наркотиком вне границ сортируемого.Если элемент был извлечен из сортируемого наркотика, то он повторно вставляет элемент по своему предыдущему индексу, эффективно сохраняя порядок списка: 

$(".tonga").draggable({
    revert: true,
    helper: "clone",
    connectToFancytree: true,
    start: function(event, ui) {
      $(event.target).data('previndex', $(event.target).index());
    },
    stop: function(event, ui) {
       if ($(event.target).data('drugout')) {
           var originalIndex = $(event.target).data('previndex');
          $("#mylist li:last").insertBefore($("#mylist li:eq(" + originalIndex + ")"));
       }
    }
});

Этот JSFiddle имеет рабочий пример. 

$(function() { // on page load
  $("#tree").fancytree({
    debugLevel: 0,
    selectMode: 1,
    extensions: ["dnd"],
    source: [{
        title: "Node 1",
        key: "1",
        "baloney": 44
      },
      {
        title: "Folder 2",
        key: "2",
        folder: true,
        children: [{
            title: "Node 2.1",
            key: "3",
            myOwnAttr: "abc"
          },
          {
            title: "Node 2.2",
            key: "4"
          }
        ]
      }
    ],
    dnd: {
      dragStart: function(node, data) {
        return true;
      },
      dragEnter: function(node, data) {
        return true;
      },
      dragDrop: function(node, data) {
        if (!data.otherNode) {
          // it's a draggable from outside the fancytree
          node.addNode({
            title: "Hello butt"
          }, data.hitMode);
          return;
        } else {
          // SOLUTION: this line enables reorder inside tree
          data.otherNode.moveTo(node, data.hitMode);
        }
      },
      initHelper: function(sourceNode, data) {
        var helper = data.ui.helper;
        var foo = $(helper).find(".fancytree-title")[0].innerHTML;
        $(helper).find(".fancytree-drag-helper-img").remove();
        $(helper).find(".fancytree-title").replaceWith('<li class="ui-state-default tonga">' + foo + "</li>");
      },
      updateHelper: function(sourceNode, data) {},
      draggable: {
        appendTo: "body",
        connectToSortable: "#mylist",
        revert: "invalid",
        containment: "document"
      }
    },
  });

  $("#mylist").sortable({
    connectWith: "#mylist",
    out: function(event, ui) {
      if (event.originalEvent.type === "mousemove") {
        $(ui.item).data('drugout', true);
      }
    }
  }).disableSelection();

  $(".tonga").draggable({
    revert: true,
    helper: "clone",
    connectToFancytree: true,
    start: function(event, ui) {
      $(event.target).data('previndex', $(event.target).index());
    },
    stop: function(event, ui) {
      if ($(event.target).data('drugout')) {
        var originalIndex = $(event.target).data('previndex');
        $("#mylist li:last").insertBefore($("#mylist li:eq(" + originalIndex + ")"));
      }
    }
  });

  $(".tonga").draggable({
    revert: false,
    helper: "original",
    connectToSortable: "#mylist"
  });
});
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
  <!-- <script src="https://cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all-deps.min.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all.min.js"></script>
</head>

<body>
  <div id="tree"></div>
  <ul id="mylist">
    <li class="ui-state-default tonga">Item 1</li>
    <li class="ui-state-default tonga">Item 2</li>
    <li class="ui-state-default tonga">Item 3</li>
    <li class="ui-state-default tonga">Item 4</li>
    <li class="ui-state-default tonga">Item 5</li>
    <li class="ui-state-default tonga">Item 6</li>
    <li class="ui-state-default tonga">Item 7</li>
  </ul>
</body>
...