如何检测节点何时离开组？ jq树

Question

我有这棵树，我让它发送 child 的 id 及其 parent's，每次节点移动到另一个时，但我会还想检测 child 何时移出其 parent.

在firebug

上查看

澄清：

比如我有两个节点：

node1 (parentless)

node2 (parentless)

然后，我把node1移到node2里面：

（然后我检查位置使用：if (event.move_info.position == 'inside');）

node2 (parentless)

node (node2)

我也想检查我何时将 node1 移到外面 node2:

但是没有 event.move_info.position == 'outside'

来自：

node2 (parentless)

node (node2)

至：

node1 (parentless)
node2 (parentless)

你能赐教吗？

提前致谢。

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

Answer 1

苦思冥想，终于想通了，果然有效，一套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>

如何检测节点何时离开组？ jq树

How can I detect when a node left a group? JqTree

javascript

jquery

jqtree