jQtree，调用嵌套列表中的方法调用父方法和子方法
jQueryUI+jQtree, call to method in nested list calls parent and child method
我在ASP中开发文件管理器。. NET MVC和使用jQuery，当我展开列表和拖放项目在树视图，它调用方法moveItem从父和从子，我希望它只从子调用。
这是我的代码，如果你把文件拖到新建文件夹
你会发现问题https://jsfiddle.net/8y4xqs4p/2/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>
$(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);
}
);
});
使用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);
}
}
});
相关文章：
- 如何在webView，Android中从@JavascriptInterface方法调用Javascript
- javascript从子方法调用父方法
- 我应该返回一个类似console.log(）的方法调用吗
- NodeJS-从同一文件中的另一个方法调用一个方法
- 使用restangular save方法调用put与post时的控件
- 从实例方法调用实例方法
- Node.js-异步方法调用问题
- Jquery事件绑定获胜'当作为方法调用时不起作用，但当直接在控制台中调用时会起作用
- 向模板实例变量传递调用方法调用的结果时出现异常
- jQuery 方法调用了两次
- 不能从 Backbone.View 的方法调用 Backbone.collection 的方法，其中包含 require
- 组合 onLayout 的方法调用
- lodash/下划线 - 使用绑定与方法调用和方法保持未绑定
- 从公共方法调用模块的私有函数
- 如何对 jqGrid 的 loadComplete 和 onSelectRow 进行基因预和后方法调用
- 完全限定的 JavaScript 方法调用
- 为什么我在 Angular JS 中收到两个方法调用
- 如何在从排序方法调用参数时将其传递给回调
- 使用两种不同的方法调用方法
- 如何在 javascript 中更改方法调用的全局范围
