Nestable.js works at the logical level but not visually

Question

Nestable.js works at the logical level but not visually

Navigation

#1 by (1 votes)

1

I am using Nestable.js to make a list of products with byproducts so that it is displayed as a tree. I do not have any errors in the console and I do not see where my error may be, but once everything is configured, the list appears like this:

Product
Byproduct

When it should come out like this:

Product

Byproduct

This is the structure I have for the list:

<div class="dd" id="nestable2">
<ol class="dd-list>
    <li class="dd-item>
     <div class="dd-handle>Producto 1 </div>
         <ol class="dd-list>
             <li class="dd-item>
                 <div class="dd-handle>Subproducto 1 </div>
             </li>
          </ol>
    </li>
</ol>
</div>

And the js:

$(document).ready(function(){
    $('#nestable2').nestable();
});

Thanks in advance.

javascript jquery html

asked by Victor Galvez Lopez 27.09.2018 в 15:46

source

1 answer

Open a report with several IDs Increase session variable expiration time in PHP

score 1 · Answer 1

The only thing I see is that the labels of the classes are badly closed, I do not know if it is an artifact of the code that you have copied, but it works for me by correcting this detail. I'll give you an example.

$(document).ready(function(){
        $('#nestable2').nestable();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Nestable/2012-10-15/jquery.nestable.js"></script>

<div class="dd" id="nestable2">
    <ol class="dd-list">
        <li class="dd-item">
         <div class="dd-handle">Producto 1 </div>
             <ol class="dd-list">
                 <li class="dd-item">
                     <div class="dd-handle">Subproducto 1 </div>
                 </li>
              </ol>
        </li>
    </ol>
    </div>