fancytree - fancytree 拖拽后移动的item字体颜色发生变化

问题描述

我在使用花式树时遇到问题。

选中一项或多项后，拖放后，移动项的字体颜色已更改

$(function() {
  // Attach the fancytree widget to an existing <div id="tree"> element
  // and pass the tree options as an argument to the fancytree() function:
  $("#tree").fancytree({
    extensions: ["dnd5", "multi", "table"],
    checkbox: true,
    //      debugLevel: 1,
    source: [{
        "title": "Books",
        "expanded": true,
        "folder": true,
        "children": [{
            "title": "Art of War",
            "type": "book",
            "author": "Sun Tzu",
            "year": -500,
            "qty": 21,
            "price": 5.95
          },
          {
            "title": "The Hobbit",
            "type": "book",
            "author": "J.R.R. Tolkien",
            "year": 1937,
            "qty": 32,
            "price": 8.97
          },
          {
            "title": "The Little Prince",
            "type": "book",
            "author": "Antoine de Saint-Exupery",
            "year": 1943,
            "qty": 2946,
            "price": 6.82
          },
          {
            "title": "Don Quixote",
            "type": "book",
            "author": "Miguel de Cervantes",
            "year": 1615,
            "qty": 932,
            "price": 15.99
          }
        ]
      },
      {
        "title": "Music",
        "folder": true,
        "children": [{
            "title": "Nevermind",
            "type": "music",
            "author": "Nirvana",
            "year": 1991,
            "qty": 916,
            "price": 15.95
          },
          {
            "title": "Autobahn",
            "type": "music",
            "author": "Kraftwerk",
            "year": 1974,
            "qty": 2261,
            "price": 23.98
          },
          {
            "title": "Kind of Blue",
            "type": "music",
            "author": "Miles Davis",
            "year": 1959,
            "qty": 9735,
            "price": 21.90
          },
          {
            "title": "Back in Black",
            "type": "music",
            "author": "AC/DC",
            "year": 1980,
            "qty": 3895,
            "price": 17.99
          },
          {
            "title": "The Dark Side of the Moon",
            "type": "music",
            "author": "Pink Floyd",
            "year": 1973,
            "qty": 263,
            "price": 17.99
          },
          {
            "title": "Sgt. Pepper's Lonely Hearts Club Band",
            "type": "music",
            "author": "The Beatles",
            "year": 1967,
            "qty": 521,
            "price": 13.98
          }
        ]
      },
      {
        "title": "Electronics & Computers",
        "expanded": true,
        "folder": true,
        "children": [{
            "title": "Cell Phones",
            "folder": true,
            "children": [{
                "title": "Moto G",
                "type": "phone",
                "author": "Motorola",
                "year": 2014,
                "qty": 332,
                "price": 224.99
              },
              {
                "title": "Galaxy S8",
                "type": "phone",
                "author": "Samsung",
                "year": 2016,
                "qty": 952,
                "price": 509.99
              },
              {
                "title": "iPhone SE",
                "type": "phone",
                "author": "Apple",
                "year": 2016,
                "qty": 444,
                "price": 282.75
              },
              {
                "title": "G6",
                "type": "phone",
                "author": "LG",
                "year": 2017,
                "qty": 951,
                "price": 309.99
              },
              {
                "title": "Lumia",
                "type": "phone",
                "author": "Microsoft",
                "year": 2014,
                "qty": 32,
                "price": 205.95
              },
              {
                "title": "Xperia",
                "type": "phone",
                "author": "Sony",
                "year": 2014,
                "qty": 77,
                "price": 195.95
              },
              {
                "title": "3210",
                "type": "phone",
                "author": "Nokia",
                "year": 1999,
                "qty": 3,
                "price": 85.99
              }
            ]
          },
          {
            "title": "Computers",
            "folder": true,
            "children": [{
                "title": "ThinkPad",
                "type": "computer",
                "author": "IBM",
                "year": 1992,
                "qty": 16,
                "price": 749.90
              },
              {
                "title": "C64",
                "type": "computer",
                "author": "Commodore",
                "year": 1982,
                "qty": 83,
                "price": 595.00
              },
              {
                "title": "MacBook Pro",
                "type": "computer",
                "author": "Apple",
                "year": 2006,
                "qty": 482,
                "price": 1949.95
              },
              {
                "title": "Sinclair ZX Spectrum",
                "type": "computer",
                "author": "Sinclair Research",
                "year": 1982,
                "qty": 1,
                "price": 529
              },
              {
                "title": "Apple II",
                "type": "computer",
                "author": "Apple",
                "year": 1977,
                "qty": 17,
                "price": 1298
              },
              {
                "title": "PC AT",
                "type": "computer",
                "author": "IBM",
                "year": 1984,
                "qty": 3,
                "price": 1235.00
              }
            ]
          }
        ]
      },
      {
        "title": "More...",
        "folder": true,
        "lazy": true
      }
    ],
    activate: function(event, data) {},
    lazyLoad: function(event, data) {
      data.result = [{
        "title": "Sub item",
        "lazy": true
      }, {
        "title": "Sub folder",
        "folder": true,
        "lazy": true
      }]
    },
    renderColumns: function(event, data) {
      var node = data.node,
        $tdList = $(node.tr).find(">td");
      $tdList.eq(1).text(node.key);
      $tdList.eq(2).text(!!node.folder);
    },
    dnd5: {
      preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
      preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
      autoExpandMS: 1000,
      multiSource: true, // drag all selected nodes (plus current node)
      // focusOnClick: true,
      // refreshPositions: true,
      dragStart: function(node, data) {
        // allow dragging `node`:
        data.dataTransfer.dropEffect = "move";
        return true;
      },
      // dragDrag: function(node, data) {
      //   data.node.info("dragDrag", data);
      //   data.dataTransfer.dropEffect = "copy";
      //   return true;
      // },
      dragEnter: function(node, data) {
        data.node.info("dragEnter", data);
        data.dataTransfer.dropEffect = "link";
        return true;
      },
      // dragOver: function(node, data) {
      //   data.node.info("dragOver", data);
      //   data.dataTransfer.dropEffect = "link";
      //   return true;
      // },
      dragEnd: function(node, data) {
        data.node.info("dragEnd", data);
      },
      dragDrop: function(node, data) {
        // This function MUST be defined to enable dropping of items on the tree.
        //
        // The source data is provided in several formats:
        //   `data.otherNode` (null if it's not a FancytreeNode from the same page)
        //   `data.otherNodeData` (Json object; null if it's not a FancytreeNode)
        //   `data.dataTransfer.getData()`
        //
        // We may access some meta data to decide what to do:
        //   `data.hitMode` ("before", "after", or "over").
        //   `data.dataTransfer.dropEffect`, `.effectAllowed`
        //   `data.originalEvent.shiftKey`, ...
        //
        // Example:

        var dataTransfer = data.dataTransfer,
          sourceNodes = data.otherNodeList,
          event = data.originalEvent,
          copyMode = event.ctrlKey || event.altKey;

        if (copyMode) {
          $.each(sourceNodes, function(i, o) {
            o.copyTo(node, data.hitMode, function(n) {
              delete n.key;
              n.selected = false;
              n.title = "Copy of " + n.title;
            });
          });
        } else {
          $.each(sourceNodes, function(i, o) {
            o.moveTo(node, data.hitMode);
          });
        }
        node.debug("drop", data);
        node.setExpanded();
      }
    }
  });

});

.fancytree-drag-source {
  font-style: oblique;
}

.fancytree-drag-source.fancytree-drag-remove {
  opacity: 0.5;
}


/* Prevent scrolling while DND */

ul.fancytree-container {
  /*
    height: 200px;
    overflow: auto;
*/
  /*    position: inherit;*/
}

<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Test D'n'D - Fancytree</title>
  <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"></script>
  <link href="https://wwwendt.de/tech/fancytree/src/skin-win8/ui.fancytree.css" rel="stylesheet">
  <script src="https://wwwendt.de/tech/fancytree/src/jquery-ui-dependencies/jquery.fancytree.ui-deps.js"></script>
  <script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.js"></script>
  <script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.dnd5.js"></script>
  <script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.multi.js"></script>
  <script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.table.js"></script>
</head>

<body class="example">
  <h1>Example: extended drag'n'drop sample</h1>
  <div class="description">
    This sample shows how to
    <ul>
      <li>implement drag'n'drop with multiple selected nodes
        <li>allow modifier keys <kbd>Ctrl</kbd> or <kbd>Alt</kbd> to force copy instead of move operations
    </ul>
  </div>
  <div>
    <label for="skinswitcher">Skin:</label>
    <select id="skinswitcher"></select>
  </div>
  <!-- Add a <table> element where the tree should appear: -->
  <!--<p class="description">
    Standard tree:
  </p>
  <div id="tree"></div>-->

  <p class="description">
    Table tree:
  </p>
  <table id="tree">
    <colgroup>
      <col width="*"/>
      <col width="200px"/>
      <col width="100px"/>
    </colgroup>
    <thead>
      <tr>
        <th></th>
        <th>Key</th>
        <th>Folder</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <p class="droppable">
    Droppable.
  </p>
</body>

标签： fancytree

fancytree - fancytree 拖拽后移动的item字体颜色发生变化

问题描述

解决方案

推荐阅读