OuttaControl OuttaControl - 3 months ago 5
jQuery Question

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

I am developing file manager in ASP.NET MVC and using jQuery, and when I expand list and Drag and drop item in treeview, it calls method moveItem from parent and from child, and I want it only to call from child.

Here my code, and you can see problem if you drag file to New Folder

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);
}
);
});

Answer

Problem solved by using JS method 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);
            }
        }
    });
Comments