0
ASP.NET MVCでjQueryを使用してファイルマネージャを開発しています。リストを展開してツリービューに項目をドラッグアンドドロップすると、メソッドmoveItemが親と子供から、私はそれが子供から電話をしたい。jQueryUI + jQtree、ネストされたリストの呼び出しで親子メソッドを呼び出す
ここに私のコード、および新しいフォルダにファイルをドラッグする場合は、問題を見ることができます
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>
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);
}
);
});