rhodecode/templates/forms/sequence.pt

<div tal:define="item_tmpl item_template|field.widget.item_template;
                 oid oid|field.oid;
                 name name|field.name;
                 min_len min_len|field.widget.min_len;
                 min_len min_len or 0;
                 max_len max_len|field.widget.max_len;
                 max_len max_len or 100000;
                 now_len len(subfields);
                 orderable orderable|field.widget.orderable;
                 orderable orderable and 1 or 0;
                 prototype field.widget.prototype(field);
                 title title|field.title;"
     class="deform-seq"
     id="${oid}">

  <style>
    body.dragging, body.dragging * {
      cursor: move !important;
    }

    .dragged {
      position: absolute;
      opacity: 0.5;
      z-index: 2000;
    }
  </style>

  <!-- sequence -->
  <input type="hidden" name="__start__"
         value="${field.name}:sequence"
         class="deform-proto"
         tal:attributes="prototype prototype"/>

  <div class="panel panel-default">
    <div class="panel-body">

      <div class="deform-seq-container"
           id="${oid}-orderable">
        <div tal:define="subfields [ x[1] for x in subfields ]"
             tal:repeat="subfield subfields"
             tal:replace="structure subfield.render_template(item_tmpl,parent=field)" />
        <span class="deform-insert-before"
              tal:attributes="
                 min_len min_len;
                 max_len max_len;
                 now_len now_len;
                 orderable orderable;">

        </span>
      </div>

      <div style="clear: both"></div>
    </div>

    <div class="panel-footer">
      <a href="#"
         class="btn deform-seq-add"
         id="${field.oid}-seqAdd"
         onclick="javascript: return deform.appendSequenceItem(this);">
        <small id="${field.oid}-addtext">${add_subitem_text}</small>
      </a>

      <script type="text/javascript">
       deform.addCallback(
         '${field.oid}',
         function(oid) {
           oid_node = $('#'+ oid);
           deform.processSequenceButtons(oid_node, ${min_len},
                                         ${max_len}, ${now_len},
                                         ${orderable});
           }
         )
         <tal:block condition="orderable">
             $( "#${oid}-orderable" ).sortable({
               handle: ".deform-order-button, .panel-heading",
               containerSelector: "#${oid}-orderable",
               itemSelector: ".deform-seq-item",
               placeholder: '<span class="glyphicon glyphicon-arrow-right placeholder"></span>',
               onDragStart: function ($item, container, _super) {
                 var offset = $item.offset(),
                 pointer = container.rootGroup.pointer;

                 adjustment = {
                   left: pointer.left - offset.left,
                   top: pointer.top - offset.top
                 };

                 _super($item, container)
               },
               onDrag: function ($item, position) {
                   $item.css({
                     left: position.left - adjustment.left,
                     top: position.top - adjustment.top
                   })
                 }
               });
         </tal:block>
      </script>

      <input type="hidden" name="__end__" value="${field.name}:sequence"/>
      <!-- /sequence -->
    </div>

  </div>
</div>