jQuery Sortable JSON Update Issue
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<ol id="my-nav">
<li data-id="unique-id-here" data-label="My Label">
<span>My Label</span>
<input type="text" class="label-change form-control" placeholder="Type here to see the impact">
<ol>
<li data-id="unique-id-here" data-label="My Sub Label">
<span>My Sub Label</span>
<input type="text" class="label-change form-control" placeholder="Type here to see the impact">
<ol>
<!-- PLACEHOLDER FOR SUBMENU -->
</ol>
</li>
</ol>
</li>
</ol>
<h4>OUTPUT HERE</h4>
<textarea id="output" class="form-control" placeholder="">[[{"label":"My Label","id":"unique-id-here","children":[[{"label":"My Sub Label","id":"unique-id-here","children":[[]]}]]}]]</textarea>
SCSS
body.dragging,
body.dragging * {
cursor: move !important;
}
// GRAB ATTENTION.
input[type="text"] {
border-color: red;
}
#my-nav {
padding-left: 0;
list-style-type: none;
overflow: hidden;
ol {
padding-left: 0;
margin-left: 20px;
list-style-type: none;
}
li {
padding: 5px 10px;
background-color: #f8f8f8;
color: #333;
border: 1px solid #999;
border-radius: 3px;
margin-bottom: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
cursor: move;
&.placeholder {
position: relative;
border-style: dashed;
background-color: #ededed;
min-height: 34px;
&:before {
position: absolute;
}
}
&.dragged {
position: absolute;
top: 0;
opacity: .5;
z-index: 2000;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
i.icon-move {
color: var(--primary);
}
}
&.highlight {
background: gray;
color: lightgray
}
&:first-of-type {
margin-top: 10px;
}
}
i.icon-move {
cursor: pointer;
color: #999;
padding: 5px;
}
}
.dd {
position: relative;
display: block;
margin: 0;
padding: 0;
max-width: 600px;
list-style: none;
font-size: 13px;
line-height: 20px;
}
.dd-list {
display: block;
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.dd-list .dd-list {
padding-left: 30px;
}
.dd-item,
.dd-empty,
.dd-placeholder {
display: block;
position: relative;
margin: 0;
padding: 0;
min-height: 20px;
font-size: 13px;
line-height: 20px;
}
.dd-handle {
display: block;
height: 30px;
margin: 5px 0;
padding: 5px 10px;
color: #333;
text-decoration: none;
font-weight: bold;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 3px;
box-sizing: border-box;
}
.dd-handle:hover {
color: #2ea8e5;
background: #fff;
}
.dd-item>button {
position: relative;
cursor: pointer;
float: left;
width: 25px;
height: 20px;
...
JavaScript
/** OUR CODE STARTS AT LINE#702 */
/* ===================================================
* jquery-sortable.js v0.9.13
* http://johnny.github.com/jquery-sortable/
* ===================================================
* Copyright (c) 2012 Jonas von Andrian
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
* * The name of the author may not be used to endorse or promote products
* derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
* ========================================================== */
! function($, window, pluginName, undefined) {
var eventNames,
containerDefaults = {
// If true, items can be dragged from this container
drag: true,
// If true, items can...