diff --git a/www/form/app-form.less b/www/form/app-form.less index efe97ed86..3636144ee 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -125,6 +125,12 @@ flex-wrap: wrap; } .cp-form-edit-block { + .cp-form-handle { + display: flex; + align-items: center; + justify-content: center; + width: 30px; + } .cp-form-edit-block-input { display: flex; width: 400px; diff --git a/www/form/inner.js b/www/form/inner.js index 37d3d50af..b2406fc93 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -221,7 +221,14 @@ define([ } var del = h('button.btn.btn-danger', h('i.fa.fa-times')); - var el = h('div.cp-form-edit-block-input', [ input, del ]); + var el = h('div.cp-form-edit-block-input', [ + h('span.cp-form-handle', [ + h('i.fa.fa-ellipsis-v'), + h('i.fa.fa-ellipsis-v'), + ]), + input, + del + ]); $(del).click(function () { $(el).remove(); // We've just deleted an item/option so we should be under the MAX limit and @@ -240,6 +247,12 @@ define([ var container = h('div.cp-form-edit-block', inputs); var $container = $(container); + Sortable.create(container, { + direction: "vertical", + handle: ".cp-form-handle", + draggable: ".cp-form-edit-block-input", + }); + var containerItems; if (v.items) { var inputsItems = v.items.map(function (itemData) { @@ -247,6 +260,11 @@ define([ }); inputsItems.push(addItem); containerItems = h('div.cp-form-edit-block', inputsItems); + Sortable.create(containerItems, { + direction: "vertical", + handle: ".cp-form-handle", + draggable: ".cp-form-edit-block-input", + }); } // Calendar...