花式树拖放标准jquery UI droppables

Question

我试图在标准的jquery UI droppables（列表视图）上实现删除奇特的树节点，

我想在删除时将树节点拖放到列表视图中我希望它的确切位置，而不是在列表视图中稍后重新排序/排序，看起来它是可以使用jquery UI如果我们添加帮助：克隆和 connecttosortable 选项，但是当我尝试将这些选项用于花式树时，它没有按预期工作，没有它们它工作正常但是没有＃39;解决目的

这是jsfiddle http://jsfiddle.net/ead830tw/

<link rel="stylesheet" href="https://rawgit.com/mar10/fancytree/master/src/skin-win8/ui.fancytree.css">
<script src="https://rawgit.com/mar10/fancytree/master/src/jquery.fancytree.js" type="text/javascript"></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 type="text/javascript"></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>

javscript

 $("#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 = 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 > 0)
            $("<li></li>").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");
    }
});