个人中心
gpt4 book ai didi

javascript - 连接到 fancytree 的可排序在拖放时忘记了其位置

转载 作者：行者123 更新时间：2023-12-03 01:37:12 27 4
gpt4 key购买 nike

我正在尝试连接 fancytree和一个JQueryUI sortable以特定的方式，使得以下是可能的:

  1. fancytree 节点可以在 fancytree 内重新排列
  2. 可排序项目可以在可排序内部重新排列
  3. fancytree 节点可以作为克隆放在可排序上，并且
  4. 可以将可排序的项目作为克隆放到 fancytree 上，以创建新的 fancytree 节点

我现在拥有的代码可以完成所有这些工作，但有一个问题我正在解决；当我将可排序节点拖到 fancytree 时，它​​不会保留其在可排序中的位置；它移动到最后。

我正在寻找的是:正是此示例代码中显示的行为，但是当从可排序项拖动到 fancytree 时，可排序项保留其位置。

这是我的代码的一个摆弄:

这是代码本身(与 fiddle 相同，也许可以节省某人的点击...):

<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>

最佳答案

我想我已经明白了。有些事情需要重新设计。

首先，需要处理可排序对象的 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>

关于javascript - 连接到 fancytree 的可排序在拖放时忘记了其位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51012623/

27 4 0
文章推荐： javascript - 如果 jquery 或 javascript 中第一个字符不是#，则阻止所有字符和符号
文章推荐： javascript - Math.random() 运行多次
文章推荐： javascript - 如何在 Electron 中保存大文件？
文章推荐： javascript - React JSX 动态 SVG 转换错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com