如何检测节点何时离开组？ JqTree
[英]How can I detect when a node left a group? JqTree
问题描述
I've got this tree and I made it send the id of a child and its parent's , every time the node is moved into another, but I'd like to also detect when the child is moved outside its parent. 
我已经有了这棵树，并让它每次将节点移到另一个节点时都发送一个child的id及parent's节点的id ，但是我还想检测何时将孩子移到其父节点之外。
Check it on firebug 在萤火虫上检查
Clarifying: 澄清：
For example, I've got two nodes: 例如，我有两个节点：
node1 (parentless)
node2 (parentless)
then, I move node1 inside node2 : 然后，我将node1移到node2 ：
(then I check the position using: if (event.move_info.position == 'inside'); ) （然后我使用以下方法检查位置： if (event.move_info.position == 'inside'); ）
node2 (parentless)
node (node2)
I'd like to also check when I move node1 to outside node2 : 我还要检查何时将node1移到node2之外：
but there's no event.move_info.position == 'outside' 但是没有 event.move_info.position == 'outside'
from: 从：
node2 (parentless)
node (node2)
to: 至：
node1 (parentless)
node2 (parentless)
Can you enlighten me? 你能启发我吗？
Thanks in advance. 提前致谢。
$(document).ready(function() { //Mandar o response aqui no data var data = [{ label: 'node1', id: 1, children: [{ label: 'child1', id: 2 }, { label: 'child3', id: 3 }, { label: 'child2', id: 4 }, { label: 'child2', id: 5 }] }, { label: 'node2', id: 6, children: [{ label: 'child3', id: 7 }] }]; $('#tree1').tree({ data: data, autoOpen: false, dragAndDrop: true }); console.log("Original Structure" + $('#tree1').tree('toJson')); $('#tree1').bind( 'tree.move', function(event) { /* console.log('moved_node', event.move_info.moved_node); console.log('target_node', event.move_info.target_node); console.log('position', event.move_info.position); console.log('previous_parent', event.move_info.previous_parent); */ if (event.move_info.position == 'after') { if (event.move_info.previous_parent.id == event.move_info.target_node.id) { alert("parents are the same " + event.move_info.previous_parent.id + event.move_info.target_node.id); } alert("after"); } if (event.move_info.position == 'after') { } if (event.move_info.position == 'inside') { var family = ('vpai=' + event.move_info.target_node.id + '&vfilho=' + event.move_info.moved_node.id) $.ajax({ type: 'POST', url: 'link', data: family, success: function(data, textStatus) { console.log('DONE: Request has been successfully sent'); }, error: function(xhr, textStatus, errorThrown) { alert('Envio Falhou\\n\\nERR: ' + errorThrown); } }); } } ); });
#navdata { width: auto; height: auto; flex: 1; padding-bottom: 1px; } #navgrid { width: 50%; height: 200px; overflow-x: visible; overflow-y: scroll; border: solid 1px #79B7E7; background-color: white; } #header { background-color: #79B7E7; width: 99.6%; text-align: center; border: 1px solid white; margin: 1px; } .jqtree-element { background-color: white; border: 1px solid white; height: 23px; color: red; } .jqtree-tree .jqtree-title { color: black; } ul.jqtree-tree { margin-top: 0px; margin-left: 1px; } ul.jqtree-tree, ul.jqtree-tree ul.jqtree_common { list-style: none outside; margin-bottom: 0; padding: 0; } ul.jqtree-tree ul.jqtree_common { display: block; text-align: left; padding-left: 0px; margin-left: 20px; margin-right: 0; } ul.jqtree-tree li.jqtree-closed > ul.jqtree_common { display: none; } ul.jqtree-tree li.jqtree_common { clear: both; list-style-type: none; } ul.jqtree-tree .jqtree-toggler { color: #325D8A; } ul.jqtree-tree .jqtree-toggler:hover { color: #3966df; text-decoration: none; } .jqtree-tree .jqtree-title.jqtree-title-folder { margin-left: 0; } span.jqtree-dragging { color: #fff; background: #79B7E7; opacity: 0.8; cursor: pointer; padding: 2px 8px; } ul.jqtree-tree li.jqtree-selected > .jqtree-element, ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover { background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#79B7E7)); }
<!DOCTYPE html> <!-- Programa: JqTree | Envia nova estrutura JSON como v pai e vfilho --> <!-- Autor: Calne Ricardo de Souza --> <!-- Data: 06/07/2015 --> <html> <head> <!--Removed due to copyrights--> </head> <body> <div id="navgrid"> <div id="header">Header</div> <div id="tree1"> <ul class="jqtree_common jqtree-tree"> <li class="jqtree_common jqtree-folder"> <div class="jqtree-element jqtree_common"> <a class="jqtree_common jqtree-toggler">â–¼</a> <span class="jqtree_common jqtree-title jqtree-title-folder">node1</span> </div> <ul class="jqtree_common "> <li class="jqtree_common"> <div class="jqtree-element jqtree_common"> <span class="jqtree-title jqtree_common">child2</span> </div> </li> <li class="jqtree_common"> <div class="jqtree-element jqtree_common"> <span class="jqtree-title jqtree_common">child1</span> </div> </li> </ul> </li> <li class="jqtree_common jqtree-folder"> <div class="jqtree-element jqtree_common"> <a class="jqtree_common jqtree-toggler">â–¼</a> <span class="jqtree_common jqtree-title jqtree-title-folder">node2</span> </div> <ul class="jqtree_common "> <li class="jqtree_common"> <div class="jqtree-element jqtree_common"> <span class="jqtree-title jqtree_common">child3</span> </div> </li> </ul> </li> </ul> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2015-08-12 13:30:50
After working tirelessly, I finally figured it out, and it works, with a set of 4 if s 孜孜不倦地工作之后，我终于想通了，它的工作原理是， if s为4
$(document).ready(function() { //Mandar o response aqui no data var data = [{ label: '1', id: 1, children: [{ label: '2', id: 2 }, { label: '3', id: 3 }] }, { label: '4', id: 4, children: [{ label: '5', id: 5 }] }]; $('#tree1').tree({ data: data, autoOpen: false, dragAndDrop: true }); console.log("Original Structure" + $('#tree1').tree('toJson')); $('#tree1').bind( 'tree.move', function(event) { console.log('______________________________________'); console.log('moved_node', event.move_info.moved_node.id); console.log('target_node', event.move_info.target_node.id); console.log('position', event.move_info.position); console.log('previous_parent', event.move_info.previous_parent.id); console.log('___'); console.log("target's parent", event.move_info.target_node.parent.id); var myNode = event.move_info.moved_node.id; var target = event.move_info.target_node.id; var myXDad = event.move_info.previous_parent.id; var targetsDad = event.move_info.target_node.parent.id; if (event.move_info.position == 'after') { if (target === myXDad) { if (targetsDad === undefined) { var family = ('vpai=' + 0 + '&vfilho=' + myNode); alert(family); send(family); } else { //get your target's dad as your dad var family = ('vpai=' + targetsDad + '&vfilho=' + myNode); alert(family); send(family); } } else if (!(myXDad === targetsDad)) { //get target's dad as your dad var family = ('vpai=' + 0 + '&vfilho=' + myNode); alert(family); send(family); } } if (event.move_info.position == 'inside') { var family = ('vpai=' + event.move_info.target_node.id + '&vfilho=' + event.move_info.moved_node.id) alert(family); send(family); } function send(family) { $.ajax({ type: 'POST', url: 'sistema.agrosys.com.br', data: family, success: function(data, textStatus) { console.log('DONE: Request has been successfully sent'); }, error: function(xhr, textStatus, errorThrown) { alert('Envio Falhou\\n\\nERR: ' + errorThrown); } }); } } ); });
<!DOCTYPE html> <!-- Programa: JqTree | Envia nova estrutura JSON como v pai e vfilho --> <!-- Autor: Calne Ricardo de Souza --> <!-- Data: 06/07/2015 --> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://sistema.agrosys.com.br/sistema/labs/tree.jquery.js"></script> <link rel="stylesheet" href="http://sistema.agrosys.com.br/sistema/labs/jqtree.css"> <script src="http://sistema.agrosys.com.br/sistema/labs/jquery-cookie/src/jquery.cookie.js"></script> <style> #navdata { width: auto; height: auto; flex: 1; padding-bottom: 1px; } #navgrid { width: 50%; height: 200px; overflow-x: visible; overflow-y: scroll; border: solid 1px #79B7E7; background-color: white; } #header { background-color: #79B7E7; width: 99.6%; text-align: center; border: 1px solid white; margin: 1px; } .jqtree-element { background-color: white; border: 1px solid white; height: 23px; color: red; } .jqtree-tree .jqtree-title { color: black; } ul.jqtree-tree { margin-top: 0px; margin-left: 1px; } ul.jqtree-tree, ul.jqtree-tree ul.jqtree_common { list-style: none outside; margin-bottom: 0; padding: 0; } ul.jqtree-tree ul.jqtree_common { display: block; text-align: left; padding-left: 0px; margin-left: 20px; margin-right: 0; } ul.jqtree-tree li.jqtree-closed > ul.jqtree_common { display: none; } ul.jqtree-tree li.jqtree_common { clear: both; list-style-type: none; } ul.jqtree-tree .jqtree-toggler { color: #325D8A; } ul.jqtree-tree .jqtree-toggler:hover { color: #3966df; text-decoration: none; } .jqtree-tree .jqtree-title.jqtree-title-folder { margin-left: 0; } span.jqtree-dragging { color: #fff; background: #79B7E7; opacity: 0.8; cursor: pointer; padding: 2px 8px; } ul.jqtree-tree li.jqtree-selected > .jqtree-element, ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover { background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#79B7E7)); } </style> </head> <body> <div id="navgrid"> <div id="header">Header</div> <div id="tree1"> <ul class="jqtree_common jqtree-tree"> <li class="jqtree_common jqtree-folder"> <div class="jqtree-element jqtree_common"> <a class="jqtree_common jqtree-toggler">â–¼</a> <span class="jqtree_common jqtree-title jqtree-title-folder">node1</span> </div> <ul class="jqtree_common "> <li class="jqtree_common"> <div class="jqtree-element jqtree_common"> <span class="jqtree-title jqtree_common">child2</span> </div> </li> <li class="jqtree_common"> <div class="jqtree-element jqtree_common"> <span class="jqtree-title jqtree_common">child1</span> </div> </li> </ul> </li> <li class="jqtree_common jqtree-folder"> <div class="jqtree-element jqtree_common"> <a class="jqtree_common jqtree-toggler">â–¼</a> <span class="jqtree_common jqtree-title jqtree-title-folder">node2</span> </div> <ul class="jqtree_common "> <li class="jqtree_common"> <div class="jqtree-element jqtree_common"> <span class="jqtree-title jqtree_common">child3</span> </div> </li> </ul> </li> </ul> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我们如何使用jqTree jquery插件 - how can we use jqTree jquery plugin
如何检测结束引号何时离开段落？ - How can I detect when the closing quotation mark is left off a paragraph?
如何检测用户何时进入或离开游戏并获取他们进入/离开的游戏名称？ - How can I detect when a user enters or leaves a game and get the game name they entered/left?
如何检测任何输入是否为空？ - How can I detect if any input is left empty?
如何检测是否按下了左 Alt + 字母 - How can I detect if left Alt + letter was pressed
如何在 node.js 中稳健地检测相对路径 - how can i robustly detect a relative path in node.js
如何在Node.js中检测函数的所有依赖项？ - How can I detect all dependencies of a function in Node.js?
如何检测 macOS 上的 Node 应用程序启动文件夹？ - How can I detect Node app startup folder on macOS?
我们如何检测路径上的左键单击 - How can we detect Left click on path
如何从数组创建jqtree - How to create jqtree from an array
相关标签