diff --git a/assets/js/app/editor/Components/Select.vue b/assets/js/app/editor/Components/Select.vue index 6e3d5e8d4..4f9eb8d73 100644 --- a/assets/js/app/editor/Components/Select.vue +++ b/assets/js/app/editor/Components/Select.vue @@ -1,6 +1,7 @@ + { - return _values.includes(item.key); + let filterSelectedItems = _values.map(value => { + const item = _options.filter(opt => opt.key === value); + if (item) { + return item[0]; + } }); if (filterSelectedItems.length === 0) { @@ -102,6 +128,50 @@ export default { this.value.push(tag); this.selected.push(tag); }, + removeElement: function(element) { + this.$refs.vselect.removeElement(element); + }, + drop(e) { + e.preventDefault(); + + const incomingId = e.dataTransfer.getData('text'); + + /** + * JS Draggable API allows elements to be dropped inside child nodes + * We have to find the parent with draggable='true' to get the id. + */ + const outgoingId = this.findDropElement(e.target).id; + + const incomingElement = this.selected.find( + el => '' + el.key === '' + incomingId, + ); + const outgoingElement = this.selected.find( + el => '' + el.key === '' + outgoingId, + ); + + const incomingIndex = this.selected.indexOf(incomingElement); + const outgoingIndex = this.selected.indexOf(outgoingElement); + + // if dragging down, insert after. else, insert before. + const newPosition = + incomingIndex < outgoingIndex ? outgoingIndex + 1 : outgoingIndex; + + this.selected.splice(incomingIndex, 1); + this.selected.splice(newPosition, 0, incomingElement); + }, + findDropElement(el) { + while (!el.hasAttribute('draggable')) { + el = el.parentNode; + } + + return el; + }, + allowDrop(e) { + e.preventDefault(); + }, + drag(e) { + e.dataTransfer.setData('text', e.target.id); + }, }, }; diff --git a/assets/scss/modules/editor/fields/_multiselect.scss b/assets/scss/modules/editor/fields/_multiselect.scss new file mode 100644 index 000000000..f6e5f17ed --- /dev/null +++ b/assets/scss/modules/editor/fields/_multiselect.scss @@ -0,0 +1,3 @@ +.multiselect__tag__drag { + display: inline-flex; +} diff --git a/assets/scss/modules/editor/fields/fields.scss b/assets/scss/modules/editor/fields/fields.scss index a6adc5402..2d341ad94 100644 --- a/assets/scss/modules/editor/fields/fields.scss +++ b/assets/scss/modules/editor/fields/fields.scss @@ -7,3 +7,4 @@ @import '_image'; @import '_file'; @import '_pre_postfix'; +@import '_multiselect';