Fancytree - Drag and Drop

HTML

<link rel="stylesheet" href="https://rawgithub.com/mar10/fancytree/master/src/skin-win8/ui.fancytree.css">
<script src="https://rawgithub.com/mar10/fancytree/master/src/jquery.fancytree.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://rawgit.com/mar10/fancytree/master/src/jquery.fancytree.dnd.js"></script>
<div id="tree">
  <ul id="treeData" style="display: none;">
    <li id="id1" title="Look, a tool tip!">item1 with key and tooltip
      <li id="id2">item2
        <li id="id3" class="folder">Folder <em>with some</em> children
          <ul>
            <li id="id3.1">Sub-item 3.1
              <ul>
                <li id="id3.1.1">Sub-item 3.1.1
                  <li id="id3.1.2">Sub-item 3.1.2
              </ul>
              <li id="id3.2">Sub-item 3.2
                <ul>
                  <li id="id3.2.1">Sub-item 3.2.1
                    <li id="id3.2.2">Sub-item 3.2.2
                </ul>
          </ul>
          <li id="id4" class="expanded">Document with some children (expanded on init)
            <ul>
              <li id="id4.1" class="active focused">Sub-item 4.1 (active and focus on init)
                <ul>
                  <li id="id4.1.1">Sub-item 4.1.1
                    <li id="id4.1.2">Sub-item 4.1.2
                </ul>
                <li id="id4.2">Sub-item 4.2
                  <ul>
                    <li id="id4.2.1">Sub-item 4.2.1
                      <li id="id4.2.2">Sub-item 4.2.2
                  </ul>
            </ul>
  </ul>
</div>
<div id="cart">
  <div class="ui-widget-content">
    <ol>
      <li class="placeholder">Add items here</li>
    </ol>
  </div>
</div>

JavaScript

$("#tree").fancytree({
   extensions: ["dnd"],
   checkbox: true,
   selectMode: 3,
   //      debugLevel: 1,       
   activate: function(event, data) {},
   //lazyLoad: function (event, data) {
   //    data.result = { url: "ajax-sub2.json" }
   //},
   dnd: {
     preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
     preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
     autoExpandMS: 400,
     // focusOnClick: true,
     refreshPositions: true,
     draggable: {
       appendTo: "body",
       //  helper: "clone",
       //   connectToSortable: "#cart ol",
       // scroll: false,
       // containment: "parent",  // $("ul.fancytree-container"),
       // cursorAt: { left: 5 },
       revert: "invalid"
       // revert: function(dropped) {
       //   return
       // }
     },
     dragStart: function(node, data) {
       // allow dragging `node`:
       return true;
     },
     initHelper: function(node, data) {
       // Helper was just created: modify markup
       var helper = data.ui.helper,
         tree = node.tree,
         sourceNodes = [];

       //Store a list of active + all selected nodes
       if (!node.isSelected()) {
         sourceNodes.unshift(node);
       }
       helper.data("sourceNodes", sourceNodes);
       // Mark selected nodes also as drag source (active node is already)
       $(".fancytree-active,.fancytree-selected", tree.$container)
         .addClass("fancytree-drag-source");
       // Add a counter badge to helper if dragging more than one node
       if (sourceNodes.length > 1) {
         helper.append($("<span class='fancytree-childcounter'/>")
           .text("+" + (sourceNodes.length - 1)));
       }
       // Prepare an indicator for copy-mode
       helper.prepend($("<span class='fancytree-dnd-modifier'/>")
         .text("+").hide());
     },

     dragDrop: function(node, data) {
       var sourceNodes = data.ui.helper.data("sourceNodes"),
         event =...