ecomp-portal-FE/client/bower_components/jqTree/_examples/03_drag_and_drop.html

   1 ---
   2 title: Javascript tree with drag and drop
   3 layout: page
   4 js: examples/drag_and_drop.js
   5 css: example.css
   6 ---
   7
   8 <p id="nav">
   9     <a href="../02_load_json_data_from_server/">&laquo; Example 2</a>
  10     <a href="../04_save_state/" class="next">Example 4 &raquo;</a>
  11 </p>
  12
  13 <h1>Example 3 - Drag and drop</h1>
  14
  15 <div id="tree1" data-url="/example_data/"></div>
  16
  17 <p>
  18    Let's add drag-and-drop support by setting the option <strong>dragAndDrop</strong> to true.
  19    You can now drag tree nodes to another position.
  20 </p>
  21
  22 <p>
  23     Other options:
  24 </p>
  25
  26 <ul>
  27     <li>The option <strong>autoOpen</strong> is set to 0 to open the first level of nodes.</li>
  28 </ul>
  29
  30 <h3>html</h3>
  31
  32 {% highlight html %}
  33 <div id="tree1" data-url="/example_data/"></div>
  34 {% endhighlight %}
  35
  36 <h3>javascript</h3>
  37
  38 {% highlight js %}
  39 var $tree = $('#tree1');
  40 $tree.tree({
  41   dragAndDrop: true,
  42   autoOpen: 0
  43 });
  44 {% endhighlight %}