Fancy tree drag and drop on standard jquery UI droppables
<p>I'm trying to implement dropping fancy tree nodes on standard jquery UI droppables(list view), </p>

<p>I would like to drag and drop the tree node to the exact position I want it in the list view at the time of dropping instead of reordering/sorting later in the list view , looks like it is do-able with jquery UI if we add <strong>helper:clone</strong> and <strong>connecttosortable</strong> options but when I try to use these options with fancy tree ,it is not working as expected, it is working fine without them but couldn't solve the purpose</p>

<p>Here is the jsfiddle <a href="http://jsfiddle.net/ead830tw/" rel="nofollow">http://jsfiddle.net/ead830tw/</a></p>

<pre><code>&lt;link rel="stylesheet" href="https://rawgit.com/mar10/fancytree/master/src/skin-win8/ui.fancytree.css"&gt;
&lt;script src="https://rawgit.com/mar10/fancytree/master/src/jquery.fancytree.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
&lt;script src=https://rawgit.com/mar10/fancytree/master/src/jquery.fancytree.dnd.js type="text/javascript"&gt;&lt;/script&gt;

&lt;div id="tree"&gt;
&lt;ul id="treeData" style="display: none;"&gt;
    &lt;li id="id1" title="Look, a tool tip!"&gt;item1 with key and tooltip
    &lt;li id="id2"&gt;item2
    &lt;li id="id3" class="folder"&gt;
        Folder &lt;em&gt;with some&lt;/em&gt; children
        &lt;ul&gt;
            &lt;li id="id3.1"&gt;
                Sub-item 3.1
                &lt;ul&gt;
                    &lt;li id="id3.1.1"&gt;Sub-item 3.1.1
                    &lt;li id="id3.1.2"&gt;Sub-item 3.1.2
                &lt;/ul&gt;
            &lt;li id="id3.2"&gt;
                Sub-item 3.2
                &lt;ul&gt;
                    &lt;li id="id3.2.1"&gt;Sub-item 3.2.1
                    &lt;li id="id3.2.2"&gt;Sub-item 3.2.2
                &lt;/ul&gt;
        &lt;/ul&gt;
    &lt;li id="id4" class="expanded"&gt;
        Document with some children (expanded on init)
        &lt;ul&gt;
            &lt;li id="id4.1" class="active focused"&gt;
                Sub-item 4.1 (active and focus on init)
                &lt;ul&gt;
                    &lt;li id="id4.1.1"&gt;Sub-item 4.1.1
                    &lt;li id="id4.1.2"&gt;Sub-item 4.1.2
                &lt;/ul&gt;
            &lt;li id="id4.2"&gt;
                Sub-item 4.2
                &lt;ul&gt;
                    &lt;li id="id4.2.1"&gt;Sub-item 4.2.1
                    &lt;li id="id4.2.2"&gt;Sub-item 4.2.2
                &lt;/ul&gt;
        &lt;/ul&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div id="cart"&gt;
&lt;div class="ui-widget-content"&gt;
    &lt;ol&gt;
        &lt;li class="placeholder"&gt;Add items here&lt;/li&gt;
    &lt;/ol&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>javscript </p>

<pre><code> $("#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 &gt; 1) {
                helper.append($("&lt;span class='fancytree-childcounter'/&gt;")
                  .text("+" + (sourceNodes.length - 1)));
            }
            // Prepare an indicator for copy-mode
            helper.prepend($("&lt;span class='fancytree-dnd-modifier'/&gt;")
              .text("+").hide());
        },

        dragDrop: function (node, data) {
            var sourceNodes = data.ui.helper.data("sourceNodes"),
                      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;
                    });
                });
            }
        }
    }
});
$("#LoadingTree").hide();



 $("#cart ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        var node = $(ui.helper).data("ftSourceNode"),
          tree = node.tree,
          copyMode = event.ctrlKey || event.altKey,
          sourceNodes = ui.helper.data("sourceNodes");

        if (!copyMode) {
            $.each(sourceNodes, function (i, o) {
                o.setSelected(true);
            });
        }
        $(this).find(".placeholder").remove();
        if (sourceNodes.length &gt; 0)
            $("&lt;li&gt;&lt;/li&gt;").text(sourceNodes[0].title).appendTo(this);
    },
    over: function (event, ui) {
        var obj = ui;
    }
}).sortable({
    items: "li:not(.placeholder)",
    connectWith:"#fancytree",
    sort: function () {
        // gets added unintentionally by droppable interacting with sortable
        // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
        $(this).removeClass("ui-state-default");
    }
});
</code></pre>