{% extends "base" %}

{% block title %}Javascript tree with drag and drop{% endblock %}
{% block h1 %}Example 3 - Drag and drop{% endblock %}

{% block previous_url %}load_json_data_from_server.html{% endblock %}
{% block previous_title %}Example 2{% endblock %}

{% block next_url %}save_state.html{% endblock %}"
{% block next_title %}Example 4{% endblock %}

{% block contents %}
    <div id="tree1" data-url="/example_data/"></div>

    <p>
       Let's add drag-and-drop support by setting the option <strong>dragAndDrop</strong> to true.
       You can now drag tree nodes to another position.
    </p>
    <p>
        Other options:
    </p>
    <ul>
        <li>The option <strong>autoOpen</strong> is set to 0 to open the first level of nodes.</li>
    </ul>

    <h3>html</h3>
<pre><code class="language-markup">&lt;div id="tree1" data-url="/example_data/"&gt;&lt;/div&gt;</code></pre>

    <h3>javascript</h3>
<pre><code class="language-javascript">var $tree = $('#tree1');
$tree.tree({
  dragAndDrop: true,
  autoOpen: 0
});
</code></pre>
{% endblock %}

{% block script %}
    <script>
        $.mockjax({
            url: '*',
            response: function(options) {
                this.responseText = ExampleData.example_data;
            },
            responseTime: 0
        });

        $(function() {
            var $tree = $('#tree1');
            $tree.tree({
                dragAndDrop: true,
                autoOpen: 0
            });
        });
    </script>
{% endblock %}
