🐳 10/02 - 14:10 - Now, a new feature should be: - I want to grab a line and drag it to another location, and automatically snap it to an allowable indentation layer

script.js

@@ -53,6 +53,12 @@ document.addEventListener('DOMContentLoaded', function() {
     let editableFields = [];
     let currentFieldIndex = -1;
     
+    // Drag and drop state
+    let draggedElement = null;
+    let draggedData = null;
+    let dropTarget = null;
+    let dropPosition = null; // 'above', 'below', or 'inside'
+    
     // Layer colors for visual distinction
     const layerColors = [
         '#ef4444', '#f97316', '#eab308', '#22c55e',
@@ -262,6 +268,23 @@ document.addEventListener('DOMContentLoaded', function() {
             wrapper.dataset.parent = parentKey;
             wrapper.dataset.depth = depth;
             wrapper.dataset.layer = Math.min(depth, 7);
+            wrapper.dataset.type = Array.isArray(data) ? 'array' : 'object';
+            
+            // Make primitive items draggable (not opening/closing brackets)
+            if (key !== 'root' && key !== 'closing') {
+                wrapper.classList.add('draggable');
+                wrapper.draggable = true;
+                
+                // Add drag handle
+                const dragHandle = document.createElement('div');
+                dragHandle.className = 'drag-handle';
+                dragHandle.innerHTML = '<i class="fas fa-grip-vertical"></i>';
+                dragHandle.style.left = `${depth * 24 + 2}px`;
+                wrapper.appendChild(dragHandle);
+                
+                // Add drag event listeners
+                addDragListeners(wrapper, key, parentKey, depth);
+            }
             
             // Layer indicator line (LCARS style)
             const layerIndicator = document.createElement('div');
@@ -380,6 +403,23 @@ document.addEventListener('DOMContentLoaded', function() {
             wrapper.dataset.parent = parentKey;
             wrapper.dataset.depth = depth;
             wrapper.dataset.layer = Math.min(depth, 7);
+            wrapper.dataset.type = 'primitive';
+            
+            // Make draggable
+            if (key !== 'root') {
+                wrapper.classList.add('draggable');
+                wrapper.draggable = true;
+                
+                // Add drag handle
+                const dragHandle = document.createElement('div');
+                dragHandle.className = 'drag-handle';
+                dragHandle.innerHTML = '<i class="fas fa-grip-vertical"></i>';
+                dragHandle.style.left = `${depth * 24 + 2}px`;
+                wrapper.appendChild(dragHandle);
+                
+                // Add drag event listeners
+                addDragListeners(wrapper, key, parentKey, depth);
+            }
             
             // Layer indicator line
             const layerIndicator = document.createElement('div');
@@ -850,4 +890,248 @@ document.addEventListener('DOMContentLoaded', function() {
         // Re-initialize with sample data
         loadJSON(sampleJSON);
     });
+    
+    // ==================== DRAG AND DROP FUNCTIONS ====================
+    
+    // Add drag event listeners to an element
+    function addDragListeners(element, key, parentKey, depth) {
+        element.addEventListener('dragstart', (e) => {
+            draggedElement = element;
+            draggedData = {
+                key: key,
+                parentKey: parentKey,
+                depth: depth,
+                element: element
+            };
+            element.classList.add('dragging');
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', JSON.stringify({ key, parentKey }));
+        });
+        
+        element.addEventListener('dragend', (e) => {
+            element.classList.remove('dragging');
+            clearDropIndicators();
+            draggedElement = null;
+            draggedData = null;
+            dropTarget = null;
+            dropPosition = null;
+        });
+        
+        element.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            if (draggedElement === element) return;
+            
+            const rect = element.getBoundingClientRect();
+            const y = e.clientY - rect.top;
+            const height = rect.height;
+            
+            // Determine drop position based on mouse position
+            if (y < height * 0.25) {
+                dropPosition = 'above';
+            } else if (y > height * 0.75) {
+                dropPosition = 'below';
+            } else {
+                dropPosition = 'inside';
+            }
+            
+            dropTarget = element;
+            updateDropIndicators();
+        });
+        
+        element.addEventListener('dragleave', (e) => {
+            element.classList.remove('drag-over', 'drag-over-above', 'drag-over-below', 'drag-over-inside');
+        });
+        
+        element.addEventListener('drop', (e) => {
+            e.preventDefault();
+            if (draggedElement === element) return;
+            
+            handleDrop(draggedData, dropTarget, dropPosition);
+        });
+    }
+    
+    // Update visual drop indicators
+    function updateDropIndicators() {
+        // Clear all indicators first
+        clearDropIndicators();
+        
+        if (!dropTarget) return;
+        
+        // Add appropriate indicator class
+        if (dropPosition === 'above') {
+            dropTarget.classList.add('drag-over-above');
+        } else if (dropPosition === 'below') {
+            dropTarget.classList.add('drag-over-below');
+        } else if (dropPosition === 'inside') {
+            dropTarget.classList.add('drag-over-inside');
+        }
+    }
+    
+    // Clear all drop indicators
+    function clearDropIndicators() {
+        document.querySelectorAll('.drag-over, .drag-over-above, .drag-over-below, .drag-over-inside').forEach(el => {
+            el.classList.remove('drag-over', 'drag-over-above', 'drag-over-below', 'drag-over-inside');
+        });
+    }
+    
+    // Handle the drop operation
+    function handleDrop(draggedData, dropTarget, dropPosition) {
+        const { key: draggedKey, parentKey: draggedParentKey } = draggedData;
+        const dropKey = dropTarget.dataset.key;
+        const dropParentKey = dropTarget.dataset.parent;
+        const dropDepth = parseInt(dropTarget.dataset.depth);
+        const dropType = dropTarget.dataset.type;
+        
+        // Get the value being moved
+        let movedValue = getValue(draggedParentKey, draggedKey);
+        
+        // Remove from original location
+        removeFromParent(draggedParentKey, draggedKey);
+        
+        // Determine new parent and position
+        let newParentKey = dropParentKey;
+        let insertPosition = 'after';
+        let insertKey = dropKey;
+        
+        if (dropPosition === 'above') {
+            // Insert before the drop target
+            insertPosition = 'before';
+            newParentKey = dropParentKey;
+            insertKey = dropKey;
+        } else if (dropPosition === 'below') {
+            // Insert after the drop target
+            insertPosition = 'after';
+            newParentKey = dropParentKey;
+            insertKey = dropKey;
+        } else if (dropPosition === 'inside') {
+            // Insert inside the drop target (as a child)
+            newParentKey = dropKey;
+            insertPosition = 'append';
+            insertKey = null;
+            
+            // For primitives, we can't insert inside - change to below
+            if (dropType === 'primitive') {
+                newParentKey = dropParentKey;
+                insertPosition = 'after';
+                insertKey = dropKey;
+            }
+        }
+        
+        // Insert at new location
+        insertToParent(newParentKey, movedValue, insertPosition, insertKey);
+        
+        // Re-render and sync
+        renderEditor();
+        updateOutput();
+        saveToHistory();
+        showSavedIndicator();
+        showNotification('Item moved successfully!', false);
+    }
+    
+    // Remove an element from its parent
+    function removeFromParent(parentKey, key) {
+        if (parentKey === 'root') {
+            delete jsonData[key];
+        } else {
+            const parent = findElementByKey(jsonData, parentKey);
+            if (parent && typeof parent === 'object') {
+                if (Array.isArray(parent)) {
+                    const index = parseInt(key);
+                    parent.splice(index, 1);
+                } else {
+                    delete parent[key];
+                }
+            }
+        }
+    }
+    
+    // Insert a value into a parent at a specific position
+    function insertToParent(parentKey, value, position = 'append', afterKey = null) {
+        if (parentKey === 'root') {
+            if (Array.isArray(jsonData)) {
+                if (position === 'append') {
+                    jsonData.push(value);
+                } else if (position === 'before' || position === 'after') {
+                    const index = Object.keys(jsonData).indexOf(afterKey);
+                    if (position === 'before') {
+                        jsonData.splice(index, 0, value);
+                    } else {
+                        jsonData.splice(index + 1, 0, value);
+                    }
+                }
+            } else {
+                // Object - need a key for the new value
+                let newKey = 'newField';
+                let counter = 1;
+                while (jsonData[newKey] !== undefined) {
+                    newKey = `newField${counter++}`;
+                }
+                
+                if (position === 'append') {
+                    jsonData[newKey] = value;
+                } else if (position === 'before' || position === 'after') {
+                    const keys = Object.keys(jsonData);
+                    const index = keys.indexOf(afterKey);
+                    const newData = {};
+                    
+                    keys.forEach((k, i) => {
+                        if (position === 'before' && i === index) {
+                            newData[newKey] = value;
+                        }
+                        newData[k] = jsonData[k];
+                        if (position === 'after' && i === index) {
+                            newData[newKey] = value;
+                        }
+                    });
+                    
+                    Object.keys(jsonData).forEach(k => delete jsonData[k]);
+                    Object.assign(jsonData, newData);
+                }
+            }
+        } else {
+            const parent = findElementByKey(jsonData, parentKey);
+            if (parent && typeof parent === 'object') {
+                if (Array.isArray(parent)) {
+                    if (position === 'append') {
+                        parent.push(value);
+                    } else if (position === 'before' || position === 'after') {
+                        const index = parseInt(afterKey);
+                        if (position === 'before') {
+                            parent.splice(index, 0, value);
+                        } else {
+                            parent.splice(index + 1, 0, value);
+                        }
+                    }
+                } else {
+                    // Object - need a key for the new value
+                    let newKey = 'newField';
+                    let counter = 1;
+                    while (parent[newKey] !== undefined) {
+                        newKey = `newField${counter++}`;
+                    }
+                    
+                    if (position === 'append') {
+                        parent[newKey] = value;
+                    } else if (position === 'before' || position === 'after') {
+                        const keys = Object.keys(parent);
+                        const index = keys.indexOf(afterKey);
+                        const newData = {};
+                        
+                        keys.forEach((k, i) => {
+                            if (position === 'before' && i === index) {
+                                newData[newKey] = value;
+                            }
+                            newData[k] = parent[k];
+                            if (position === 'after' && i === index) {
+                                newData[newKey] = value;
+                            }
+                        });
+                        
+                        Object.keys(parent).forEach(k => delete parent[k]);
+                        Object.assign(parent, newData);
+                    }
+                }
+            }
+        }
+    }
 });

style.css

@@ -321,4 +321,77 @@ p {
 @keyframes pulse-green {
     0%, 100% { background-color: rgba(34, 197, 94, 0.2); }
     50% { background-color: rgba(34, 197, 94, 0.4); }
+}
+
+/* Drag and drop styles */
+.draggable {
+    cursor: grab;
+}
+
+.draggable:active {
+    cursor: grabbing;
+}
+
+.draggable.dragging {
+    opacity: 0.5;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.drag-over {
+    border-top: 2px solid var(--layer-color, #3b82f6);
+    background-color: rgba(59, 130, 246, 0.1);
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+.drag-over-above {
+    border-top: 3px solid var(--layer-color, #3b82f6);
+}
+
+.drag-over-below {
+    border-bottom: 3px solid var(--layer-color, #3b82f6);
+}
+
+.drag-over-inside {
+    border-left: 4px solid var(--layer-color, #3b82f6);
+    background-color: rgba(59, 130, 246, 0.15);
+}
+
+.drop-indicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--layer-color, #3b82f6), transparent);
+    z-index: 100;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.drop-indicator.show {
+    opacity: 1;
+}
+
+/* Drag handle icon */
+.drag-handle {
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: rgba(255, 255, 255, 0.3);
+    cursor: grab;
+    padding: 4px;
+    opacity: 0;
+    transition: opacity 0.2s;
+    z-index: 10;
+}
+
+.json-item:hover .drag-handle {
+    opacity: 1;
+}
+
+.drag-handle:active {
+    cursor: grabbing;
+    color: rgba(255, 255, 255, 0.6);
 }