knockout-sortable
knockout-sortable copied to clipboard
Nested sortable support
It seems that there is some issues when nesting sortables. Is it supported?
<div data-bind="sortable: { data: editingEyeExamTemplateModel.template, options: { containment: '.headers-wrapper', handle: '.header-drag-handle', tolerance: 'pointer' } }" class="headers-wrapper"> <div class="header"> <div data-bind="style: { 'background-color': color }" class="header-lead"> <div class="title-wrapper"> <input data-bind="textInput: title" class="title" /> </div> <div class="header-drag-handle"></div> <div data-bind="dxCheckBox: { value: openByDefault, text: '@PageResources.OpenByDefault' }"></div> <button data-bind="click: $root.onOpenColorPicker" class="header-btn open-color-picker-btn"> <i data-bind="style: { 'color': color }" class="fa fa-paint-brush"></i> </button> <button data-bind="click: $root.onRemoveHeader, visible: $root.editingEyeExamTemplateModel.template().length > 1" class="header-btn remove-btn" style="display: none;"> <i class="fa fa-remove"></i> </button> </div> <div class="header-content"> <div data-bind="style: { 'border-color': color }" class="sub-header"> <div data-bind="sortable: { data: subHeaders, options: { containment: '.sub-header', tolerance: 'pointer' } }"> blah blah blah </div> <button data-bind="click: $root.onAddNewSubHeader" class="btn-new-sub-header"> @PageResources.AddNewSubHeader </button> </div> </div> </div> </div>