Я пытаюсь использовать fancytree с ext-table и расширением dnd5.До сих пор это работает нормально для меня.Я хотел бы отсортировать столбцы таблицы через dnd также .Регистрация содержимого <th> как перетаскиваемого не работает.Я получаю следующее исключение:
Uncaught TypeError: Cannot read property 'toggleClass' of null
at HTMLTableElement.<anonymous> (jquery.fancytree.dnd5.js:530)
at HTMLTableElement.dispatch (jquery.js:5183)
at HTMLTableElement.elemData.handle (jquery.js:4991)
Просматривая файл jquery.fancytree.dnd5.js, я нашел классы CSS
classDragSource = "fancytree-drag-source",
classDragRemove = "fancytree-drag-remove",
classDropAccept = "fancytree-drop-accept",
classDropAfter = "fancytree-drop-after",
classDropBefore = "fancytree-drop-before",
classDropOver = "fancytree-drop-over",
classDropReject = "fancytree-drop-reject",
classDropTarget = "fancytree-drop-target",
Я немного поиграл, но безуспешно, трудно разглядетьсоответствующая часть.
Тем не менее, вот часть HTML
<table id="treegrid" width="100%">
<colgroup>
<col width="50px"></col>
<col width="50px"></col>
<col width="50px"></col>
<col width="50px"></col>
<col width="50px"></col>
<col width="50px"></col>
<col width="50px"></col>
<col width="1*"></col>
<col width="1*"></col>
</colgroup>
<thead>
<!-- <tr> <th></th> <th>Filter</th>
<th><input type="text" name="FName"/></th>
<th><input type="text" name="FTeileNr"/></th>
<th><input type="text" name="FMenge"/></th> <th>AbsQty</th><th>Pos</th><th>AbsPos</th><th>Like</th> </tr>-->
<tr> <th></th>
<th><div id="tgLevel" draggable="true" class="colresizeable">Level</div></th>
<th><div id="tgName" draggable="true" class="colresizeable">Name</div></th>
<th><div id="tgTeileNr" draggable="true" class="colresizeable">TeileNr</div></th>
<th><div id="tgTMenge" draggable="true" class="colresizeable">Menge</div></th>
<th><div id="tgTAbsQty" draggable="true" class="colresizeable">AbsQty</div></th>
<th><div id="tgPos" draggable="true" class="colresizeable">Pos</div></th>
<th><div id="tgAbsPos" draggable="true" class="colresizeable">AbsPos</div></th>
<th><div id="tgLike" draggable="true" class="colresizeable">Like</div></th>
</tr>
</thead>
<!-- Otionally define a row that serves as template, when new nodes are created: -->
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="alignRight"></td>
<td class="alignRight"></td>
<td></td>
<td></td>
<td class="alignCenter">
<input type="checkbox" name="like">
</td>
</tr>
</tbody>
</table>
Я добавил раздел dnd5 как
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;
},
dragEnter: function(node, data) {
data.node.info("dragEnter", data);
data.dataTransfer.dropEffect = "link";
return true;
},
dragEnd: function(node, data) {
},
dragDrop: function(node, data) {
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;
if(data.hitMode=="over"){
$.when(mergerelation(node.data.ident,o.data.ident,"--")).then(console.log("back from mergecallajax"));
console.log("TNODE: "+o.title+" id:"+o.data.ident+" tpos"+"--");
console.log("SNODE: "+node.title+" id: "+node.data.ident);
}
if(data.hitMode=="after"){
var tpos=node.data.Pos;
var tnode=node.data.PartID;
n.data.pos=tpos;
$.when(mergerelation(tnode,o.data.ident,tpos)).then(console.log("back from mergecallajax"));
console.log("TNODE: "+o.title+" id:"+o.data.ident);
console.log("SNODE: "+node.title+" id: "+node.data.ident);
}
if(data.hitMode=="before"){
var tpos=node.data.Pos;
var tnode=node.data.PartID;
n.data.pos=tpos;
$.when(mergerelation(tnode,o.data.ident,tpos)).then(console.log("back from mergecallajax"));
console.log("TNODE: "+o.title+" id:"+o.data.ident);
console.log("SNODE: "+node.title+" id: "+node.data.ident);
}
});
}
});
});
} else {
$.each(sourceNodes, function(i, o){
o.moveTo(node, data.hitMode);
});
}
node.debug("drop", data);
node.setExpanded();
}
}