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.

Check it on firebug

Clarifying:

For example, I've got two nodes:

node1 (parentless)

node2 (parentless)

then, I move node1 inside node2:

(then I check the position using: if (event.move_info.position == 'inside');)

node2 (parentless)

node (node2)

I'd like to also check when I move node1 to outside node2:

but there's no 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>

Solution

After working tirelessly, I finally figured it out, and it works, with a set of 4 ifs

$(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>