Implemented option `limitDragging`, see #962

HISTORY.md

@@ -3,6 +3,12 @@
 https://github.com/josdejong/jsoneditor
 
 
+## not yet published, version 9.0.0
+
+- Implemented option `limitDragging`, see #962. This is a breaking change when 
+  using a JSON schema: dragging is restricted in that case.
+
+
 ## 2020-05-13, version 8.6.8
 
 - Fix #936: too many return characters inserted when pasting formatted text

docs/api.md

@@ -222,11 +222,15 @@ Constructs a new JSONEditor.
 
 - `{boolean} escapeUnicode`
 
-  If true, unicode characters are escaped and displayed as their hexadecimal code (like `\u260E`) instead of of the character itself (like `☎`). `false` by default.
+  If `true`, unicode characters are escaped and displayed as their hexadecimal code (like `\u260E`) instead of of the character itself (like `☎`). `false` by default.
 
 - `{boolean} sortObjectKeys`
 
-  If true, object keys in 'tree', 'view' or 'form' mode list be listed alphabetically instead by their insertion order. Sorting is performed using a natural sort algorithm, which makes it easier to see objects that have string numbers as keys. `false` by default.
+  If `true`, object keys in 'tree', 'view' or 'form' mode list be listed alphabetically instead by their insertion order. Sorting is performed using a natural sort algorithm, which makes it easier to see objects that have string numbers as keys. `false` by default.
+
+- `{boolean} limitDragging`
+
+  If `false`, nodes can be dragged from any parent node to any other parent node. If `true`, nodes can only be dragged inside the same parent node, which effectively only allows reordering of nodes. By default, `limitDragging` is `true` when no JSON `schema` is defined, and `false` otherwise.
 
 - `{boolean} history`
 

src/js/JSONEditor.js

@@ -184,7 +184,7 @@ JSONEditor.VALID_OPTIONS = [
   'colorPicker', 'onColorPicker',
   'timestampTag', 'timestampFormat',
   'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
-  'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform',
+  'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform', 'limitDragging',
   'maxVisibleChilds', 'onValidationError',
   'modalAnchor', 'popupAnchor',
   'createQuery', 'executeQuery', 'queryDescription'

src/js/Node.js

@@ -4209,7 +4209,10 @@ Node.onDrag = (nodes, event) => {
       }
     }
 
-    if (nodePrev) {
+    if (
+      nodePrev &&
+      (editor.options.limitDragging === false || nodePrev.parent === nodes[0].parent)
+    ) {
       nodes.forEach(node => {
         nodePrev.parent.moveBefore(node, nodePrev)
       })
@@ -4285,7 +4288,11 @@ Node.onDrag = (nodes, event) => {
         }
 
         // move the node when its position is changed
-        if (nodeNext && nodeNext.dom.tr && trLast.nextSibling !== nodeNext.dom.tr) {
+        if (
+          nodeNext &&
+          (editor.options.limitDragging === false || nodeNext.parent === nodes[0].parent) &&
+          nodeNext.dom.tr && nodeNext.dom.tr !== trLast.nextSibling
+        ) {
           nodes.forEach(node => {
             nodeNext.parent.moveBefore(node, nodeNext)
           })

src/js/treemode.js

@@ -127,6 +127,7 @@ treemode._setOptions = function (options) {
     autocomplete: null,
     navigationBar: true,
     mainMenuBar: true,
+    limitDragging: false,
     onSelectionChange: null,
     colorPicker: true,
     onColorPicker: function (parent, color, onChange) {
@@ -169,6 +170,11 @@ treemode._setOptions = function (options) {
     Object.keys(options).forEach(prop => {
       this.options[prop] = options[prop]
     })
+
+    // default limitDragging to true when a JSON schema is defined
+    if (options.limitDragging == null && options.schema != null) {
+      this.options.limitDragging = true
+    }
   }
 
   // compile a JSON schema validator if a JSON schema is provided

test/test_build.html

@@ -71,7 +71,8 @@
       console.log("Blur : ",event);
     },
     indentation: 4,
-    escapeUnicode: true
+    escapeUnicode: true,
+    limitDragging: true
   };
 
   json = {