support drag and drop for array item

CHANGELOG.md

@@ -1,6 +1,7 @@
 ### Unreleased
 
 - Added options: "has_placeholder_option" and "placeholder_option_text"
+- Support drag and drop for array item
 
 ### 2.14.1
 

README.md

@@ -1098,6 +1098,10 @@ editor.on('deleteAllRows', deletedValues => {
 });
 ```
 
+Drag and drop for array item is supported. 
+For array editor with format=`tabs` or `tabs-top`, dragging the tab header is enabled by default.
+But for the default editor or format=`table`, dragging is enabled once by double click on the array item panel. This design avoid side-effect of draggable panel.
+
 #### Schema loader events
 
 When schemas are loaded via a request, the `schemaLoaded` event is triggered individually for each schema after its loading.

src/editors/array.js

@@ -504,6 +504,9 @@ export class ArrayEditor extends AbstractEditor {
  e.preventDefault()
  e.stopPropagation()
  })
+ this._supportDragDrop(this.rows[i].tab)
+ } else {
+ this._supportDragDrop(this.rows[i].container, true)
  }
 
  const controlsHolder = this.rows[i].title_controls || this.rows[i].array_controls
@@ -670,6 +673,23 @@ export class ArrayEditor extends AbstractEditor {
  return button
  }
 
+ _supportDragDrop (tab, useTrigger) {
+ supportDragDrop(tab, (i, j) => {
+ const rows = this.getValue()
+ const tmp = rows[i]
+ rows.splice(i, 1)
+ rows.splice(j, 0, tmp)
+
+ this.setValue(rows)
+ this.active_tab = this.rows[j].tab
+ this.refreshTabs()
+
+ this.onChange(true)
+
+ this.jsoneditor.trigger('moveRow', this.rows[j])
+ }, { useTrigger: useTrigger })
+ }
+
  addControls () {
  this.collapsed = false
  this.toggle_button = this._createToggleButton()
@@ -841,3 +861,54 @@ export class ArrayEditor extends AbstractEditor {
  }
 }
 ArrayEditor.rules = rules
+
+// drag/drop array item to adjust order
+// handler(fromIdx, toIdx, fromDom, toDom), opt={useTrigger}
+// useTrigger=true: double click to enable drag
+export function supportDragDrop (tab, handler, opt = {}) {
+ if (opt.useTrigger) {
+ tab.addEventListener('dblclick', e => {
+ if (e.target.tagName === 'INPUT') {
+ return
+ }
+ window.console.log('enable drag')
+ tab.draggable = true
+ })
+ tab.addEventListener('dragend', e => {
+ tab.draggable = false
+ })
+ } else {
+ tab.draggable = true
+ }
+ tab.addEventListener('dragstart', e => {
+ window.curDrag = tab
+ })
+ tab.addEventListener('dragover', e => {
+ if (window.curDrag === null || window.curDrag === tab || window.curDrag.parentElement !== tab.parentElement) {
+ e.dataTransfer.dropEffect = 'none'
+ } else {
+ e.dataTransfer.dropEffect = 'move'
+ }
+ e.preventDefault()
+ })
+ tab.addEventListener('drop', e => {
+ e.preventDefault()
+ e.stopPropagation()
+ if (window.curDrag === null || window.curDrag === tab || window.curDrag.parentElement !== tab.parentElement) {
+ return
+ }
+ const getPos = item => {
+ let i = 0
+ let a = item.parentElement.firstElementChild
+ while (a !== item && a !== null) {
+ a = a.nextSibling
+ ++i
+ }
+ return i
+ }
+ const i = getPos(window.curDrag)
+ const j = getPos(tab)
+ handler(i, j, window.curDrag, tab)
+ window.curDrag = null
+ })
+}

src/editors/table.js

@@ -1,4 +1,4 @@
-import { ArrayEditor } from './array.js'
+import { ArrayEditor, supportDragDrop } from './array.js'
 import { extend, generateUUID, trigger } from '../utilities.js'
 
 export class TableEditor extends ArrayEditor {
@@ -321,6 +321,8 @@ export class TableEditor extends ArrayEditor {
  this.rows[i].movedown_button = this._createMoveDownButton(i, controlsHolder)
  }
 
+ this._supportDragDrop(this.rows[i].row)
+
  if (typeof value !== 'undefined') this.rows[i].setValue(value)
 
  return this.rows[i]
@@ -434,6 +436,20 @@ export class TableEditor extends ArrayEditor {
  return button
  }
 
+ _supportDragDrop (tab) {
+ supportDragDrop(tab, (i, j) => {
+ const rows = this.getValue()
+ const tmp = rows[i]
+ rows.splice(i, 1)
+ rows.splice(j, 0, tmp)
+
+ this.setValue(rows)
+ this.onChange(true)
+
+ this.jsoneditor.trigger('moveRow', this.rows[j])
+ }, { useTrigger: true })
+ }
+
  addControls () {
  this.collapsed = false
  this.toggle_button = this._createToggleButton()