Question

我尝试将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();
          }
      }

Answer 1

似乎您发现了一个错误：Fancytree也会尝试处理非节点元素的拖动事件。

我在这里为此打开了一个问题： https://github.com/mar10/fancytree/issues/910

（应尽快修复）

Fancytree ext-table dnd（5）

1 个答案: