0

私はこのツリーを持っていて、ノードが別のノードに移動するたびidに achildとそのを送信するparent'sようにしましたが、子が親の外に移動したときも検出したいと思います。

firebugで確認してください

明確化:

たとえば、次の 2 つのノードがあります。

node1 (親なし)

node2 (親なし)

次に、私はnode1中node2に移動します:

（次に、次を使用して位置を確認しますif (event.move_info.position == 'inside');：）

node2 (親なし)

ノード (ノード 2)

node1外に移動するときも確認したいnode2：

しかし、ありません event.move_info.position == 'outside'

から：

node2 (親なし)

ノード (ノード 2)

に：

node1 (親なし)
node2 (親なし)

あなたは私を啓発することができますか？

前もって感謝します。

$(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">â–¼&lt;/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">â–¼&lt;/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>

4

1 に答える 1