<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>