Ordering element

All you have to do is add the page_cms/container_ui.html to a looping element.


{% include "page_cms/container_ui.html" %}

You can also choose directly the order by adding the advance version


{% include "page_cms/container_ui_advance.html" %}


Drag and Drop

To add drag and drop functionality to containers we two classes,


.pc_dd_container.pc_dd_element

The container class must be the direct parent of the element.

With in the element you must have the include for container_ui.html


{% include "page_cms/container_ui.html" %}or just add<span class="remove_container" data-hide="true" data-container="{{the page id}}"></span> 


A full example would look like this,


<div  data-slug="first_container"  data-type="container"  class="pc_dd_container"  >  {% for container in first_container.containers %}{% with container.data as data %}    <div class="pc_dd_element" id="first_container{{data.conatiner.pk}}">      Your looping content in here...      {% include "page_cms/container_ui.html" %}    </div>  {% endwith %}{% endfor %}</div>