jQuery UI+jStree，调用嵌套列表类parent和child方法中的方法

Question

我正在 ASP.NET MVC 中开发文件管理器并使用 jQuery，当我在树视图中展开列表和拖放项目时，它从 parent 和从child，我希望它只从 child.

调用

这是我的代码，如果你将文件拖到新文件夹，你会看到问题

HTML:

<div style="height:150px;">
</div>
<div class="ui-widget ui-helper-clearfix">
    <div class="folder-list">
        <ul id="folder-list" class="folders ui-helper-reset ui-helper-clearfix ">

                <li class="ui-droppable">
                    <span id="0" onclick="ajaxExpand(0)" path="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeI">(+)</span><a href="/BSMFileManager/fakeI/" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeI">fakeI</a>
                </li>
                <li class="ui-droppable">
                    <span id="1" onclick="ajaxExpand(1)" path="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeL">(+)</span><a href="/BSMFileManager/fakeL/" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeL">fakeL</a>
                </li>
        </ul>

        <div id="tree1" data-url="/FileManager/nodes" class=""><ul class="jqtree_common jqtree-tree" role="tree"><li class="jqtree_common jqtree-folder ui-droppable" role="presentation" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeI"><div class="jqtree-element jqtree_common" role="presentation"><a class="jqtree-toggler jqtree_common jqtree-toggler-left" role="presentation" aria-hidden="true"><i class="fa fa-minus"></i></a><span class="jqtree-title jqtree_common jqtree-title-folder" role="treeitem" aria-level="1" aria-selected="false" aria-expanded="true">fakeI</span></div><ul class="jqtree_common " role="group" style="display: block;"><li class="jqtree_common jqtree-folder jqtree-closed ui-droppable" role="presentation" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeI\New folder"><div class="jqtree-element jqtree_common" role="presentation"><a class="jqtree-toggler jqtree_common jqtree-closed jqtree-toggler-left" role="presentation" aria-hidden="true"><i class="fa fa-plus"></i></a><span class="jqtree-title jqtree_common jqtree-title-folder" role="treeitem" aria-level="2" aria-selected="false" aria-expanded="false">New folder</span></div></li><li class="jqtree_common jqtree-folder jqtree-closed ui-droppable" role="presentation" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeI\New folder (2)"><div class="jqtree-element jqtree_common" role="presentation"><a class="jqtree-toggler jqtree_common jqtree-closed jqtree-toggler-left" role="presentation" aria-hidden="true"><i class="fa fa-plus"></i></a><span class="jqtree-title jqtree_common jqtree-title-folder" role="treeitem" aria-level="2" aria-selected="false" aria-expanded="false">New folder (2)</span></div></li><li class="jqtree_common jqtree-folder jqtree-closed ui-droppable" role="presentation" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeI\New folder (3)"><div class="jqtree-element jqtree_common" role="presentation"><a class="jqtree-toggler jqtree_common jqtree-closed jqtree-toggler-left" role="presentation" aria-hidden="true"><i class="fa fa-plus"></i></a><span class="jqtree-title jqtree_common jqtree-title-folder" role="treeitem" aria-level="2" aria-selected="false" aria-expanded="false">New folder (3)</span></div></li><li class="jqtree_common ui-droppable" role="presentation" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeI\New Text Document (2).txt"><div class="jqtree-element jqtree_common" role="presentation"><span class="jqtree-title jqtree_common" role="treeitem" aria-level="2" aria-selected="false" aria-expanded="false">New Text Document (2).txt</span></div></li><li class="jqtree_common ui-droppable" role="presentation" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeI\New Text Document.txt"><div class="jqtree-element jqtree_common" role="presentation"><span class="jqtree-title jqtree_common" role="treeitem" aria-level="2" aria-selected="false" aria-expanded="false">New Text Document.txt</span></div></li><li class="jqtree_common ui-droppable" role="presentation" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeI\New WinRAR ZIP archive.zip"><div class="jqtree-element jqtree_common" role="presentation"><span class="jqtree-title jqtree_common" role="treeitem" aria-level="2" aria-selected="false" aria-expanded="false">New WinRAR ZIP archive.zip</span></div></li></ul></li><li class="jqtree_common jqtree-folder jqtree-closed ui-droppable" role="presentation" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeL"><div class="jqtree-element jqtree_common" role="presentation"><a class="jqtree-toggler jqtree_common jqtree-closed jqtree-toggler-left" role="presentation" aria-hidden="true"><i class="fa fa-plus"></i></a><span class="jqtree-title jqtree_common jqtree-title-folder" role="treeitem" aria-level="1" aria-selected="false" aria-expanded="false">fakeL</span></div></li></ul></div>

    </div>
    <div class="folder-view">
        <ul id="folders" class="folders ui-helper-reset ui-helper-clearfix ">
                <li class="ui-widget-content ui-corner-tr draggable ui-draggable ui-draggable-handle ui-droppable">
                    <i class="fa fa-folder-open-o fa-3x" aria-hidden="true"></i>
                    <a href="fakeI/" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeI">fakeI</a> 17.8.2016. 11:05:28
                </li>
                <li class="ui-widget-content ui-corner-tr draggable ui-draggable ui-draggable-handle ui-droppable">
                    <i class="fa fa-folder-open-o fa-3x" aria-hidden="true"></i>
                    <a href="fakeL/" title="c:\users\vmi\documents\visual studio 2015\Projects\BSMFileManager\BSMFileManager\fakeDrives\fakeL">fakeL</a> 17.8.2016. 7:21:27
                </li>
        </ul>
        <ul id="files" class="files ui-helper-reset ui-helper-clearfix">
        </ul>
    </div>
</div>

Javascript:

  $(function () {
  var $files = $("#files"),
    $folders = $("#folders"),
    $folder = $("#folders li"),
    $folderList = $("#folder-list li"),
    $tree1 = $("#tree1 li");

  $("li", $files).draggable({

    revert: "invalid",
    containment: "document",
    helper: "clone",
    cursor: "move"
  });
  $("li", $folders).draggable({
    revert: "invalid",
    containment: "document",
    helper: "clone",
    cursor: "move"
  });

  $folder.droppable({
    //accept: {"#files > li" },
    classes: {
      "ui-droppable-active": "ui-state-highlight"
    },
    drop: function(event, ui) {
      var $to = $(this).children("a").attr("title");
      moveItem(ui.draggable, $to);
    }
  });
  $folderList.droppable({
    //accept: {"#files > li" },
    classes: {
      "ui-droppable-active": "ui-state-highlight"
    },
    drop: function(event, ui) {
      var $to = $(this).children("a").attr("title");
      moveItem(ui.draggable, $to);
    }
  });


  $tree1.droppable({
    //accept: {"#files > li" },
    classes: {
      "ui-droppable-active": "ui-state-highlight"
    },
    drop: function(event, ui) {
      var $to = $(this).attr("title");
      moveItem(ui.draggable, $to);
    }
  });



  function moveItem($item, $to) {
    var $from = $item.children("a").attr("title");
    $item.fadeOut(function() {
      alert("Droped on folder from " + $from + " to: " + $to);

    });
  }


  function undoItem($item) {
    $item.fadeOut(function() {
      $item
        .find("a.ui-icon-refresh")
        .remove()
        .end()
        .append(folders_icon)
        .find("img")
        .end()
        .appendTo($files)
        .fadeIn();
    });
  }



  $("ul.files > li").on("click", function(event) {
    var $item = $(this),
      $target = $(event.target);

    if ($target.is("a.ui-icon-trash")) {
      moveItem($item);
    } else if ($target.is("a.ui-icon-refresh")) {
      undoItem($item);
    }

    return false;
  });

  $('#tree1').tree({
    closedIcon: $('<i class="fa fa-plus"></i>'),
    openedIcon: $('<i class="fa fa-minus"></i>'),
    dragAndDrop: false,
    selectable: true,
    onCreateLi: function(node, $li) {

      $li.attr("title", node.path);
      $li.addClass("ui-droppable");
    }
  });


  $('#tree1').bind(
    'tree.click',
    function(event) {
      // The clicked node is 'event.node'
      var node = event.node;
      console.log('clicked ' + node.name);
    }
  );
});

Answer 1

使用JS方法elementFromPoint解决的问题

$tree1.droppable({
        //changes class to highlight whole tree
        classes: {
            "ui-droppable-active": "ui-state-highlight"
        },
        drop: function (event, ui) {

            var x = ui.position.left-5; //setting x coordinate
            var y = ui.position.top-5; //setting y coordinate
            var elem = document.elementFromPoint(x, y); 
            var li = $(elem).closest('li'); 
            var $to = $(li).attr("path") //from this on is code needed for my app
            if(isDir($to)){
                moveItem(ui.draggable, $to);
            }
        }
    });

jQuery UI+jStree，调用嵌套列表类parent和child方法中的方法

jQueryUI+jQtree, call to method in nested list calls parent and child method

javascript

jquery

jquery-ui

jqtree