使用花式树时遇到问题。
检查一个或多个项目后，拖放操作，已移动项目的字体颜色已更改
<div>$(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;*/
}