I am attempting to use JQuery-UI sortable alongside Django FormSet. The sorting works just fine, but I need to update the HTML FormSet items so that the order can be maintained after saving to back end.
Image in view:
Here is the HTML:
<div class="skills-sortable ui-sortable">
<!-- Management data of formset --><input type="hidden" name="form-TOTAL_FORMS" value="6" id="id_form-TOTAL_FORMS" class="ui-sortable-handle" style=""><input type="hidden" name="form-INITIAL_FORMS" value="6" id="id_form-INITIAL_FORMS" class="ui-sortable-handle" style=""><input type="hidden" name="form-MIN_NUM_FORMS" value="0" id="id_form-MIN_NUM_FORMS" class="ui-sortable-handle" style=""><input type="hidden" name="form-MAX_NUM_FORMS" value="1000" id="id_form-MAX_NUM_FORMS" class="ui-sortable-handle" style="">
<div class="accordion accordion-icon accordion-boxed accordion-plus mb-3 skills-card ui-sortable-handle">
<div class="delete-icon delete-icon-skills"><i class="fas fa-trash-alt"></i></div>
<div class="card">
<div class="card-header">
<a href="#collapse" class="expand pb-0">JavaScript</a>
<p class="pl-4 pr-4 ">Expert</p>
</div>
<div class="card-body collapsed" id="collapse">
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<div class="form-group"><label for="id_form-0-skill">Skill:</label><input type="text" name="form-0-skill" value="JavaScript" class="form-control form-control-md skill" placeholder="Enter Skill" autocomplete="off" id="id_form-0-skill"></div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="id_form-0-level">Level:</label>
<div class="range">
<div class="range">
<input type="range" name="form-0-level" value="5" step="1" min="1" max="5" class="form-control-md range-input level" id="id_form-0-level">
<div class="range__ticks"><span class="range__tick"><span class="range__tick-text">1</span></span><span class="range__tick"><span class="range__tick-text">2</span></span><span class="range__tick"><span class="range__tick-text">3</span></span><span class="range__tick"><span class="range__tick-text">4</span></span><span class="range__tick"><span class="range__tick-text">5</span></span></div>
</div>
<div class="range__ticks"><span class="range__tick"><span class="range__tick-text">1</span></span><span class="range__tick"><span class="range__tick-text">2</span></span><span class="range__tick"><span class="range__tick-text">3</span></span><span class="range__tick"><span class="range__tick-text">4</span></span><span class="range__tick"><span class="range__tick-text">5</span></span></div>
</div>
</div>
</div>
</div>
<div class="form-group mb-3"><input type="hidden" name="form-0-form_type" value="skills" id="id_form-0-form_type"></div>
</div>
</div>
</div>
</div>
<div class="accordion accordion-icon accordion-boxed accordion-plus mb-3 skills-card ui-sortable-handle">
<div class="delete-icon delete-icon-skills"><i class="fas fa-trash-alt"></i></div>
<div class="card">
<div class="card-header">
<a href="#collapse" class="expand pb-0">Python</a>
<p class="pl-4 pr-4 ">Experienced</p>
</div>
<div class="card-body collapsed" id="collapse">
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<div class="form-group"><label for="id_form-1-skill">Skill:</label><input type="text" name="form-1-skill" value="Python" class="form-control form-control-md skill" placeholder="Enter Skill" autocomplete="off" id="id_form-1-skill"></div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="id_form-1-level">Level:</label>
<div class="range">
<input type="range" name="form-1-level" value="4" step="1" min="1" max="5" class="form-control-md range-input level" id="id_form-1-level">
<div class="range__ticks"><span class="range__tick"><span class="range__tick-text">1</span></span><span class="range__tick"><span class="range__tick-text">2</span></span><span class="range__tick"><span class="range__tick-text">3</span></span><span class="range__tick"><span class="range__tick-text">4</span></span><span class="range__tick"><span class="range__tick-text">5</span></span></div>
</div>
</div>
</div>
</div>
<div class="form-group mb-3"><input type="hidden" name="form-1-form_type" value="skills" id="id_form-1-form_type"></div>
</div>
</div>
</div>
</div>
<div class="accordion accordion-icon accordion-boxed accordion-plus mb-3 skills-card ui-sortable-handle" style="position: relative; left: 0px; top: 0px;">
<div class="delete-icon delete-icon-skills"><i class="fas fa-trash-alt"></i></div>
<div class="card">
<div class="card-header">
<a href="#collapse" class="expand pb-0">Firebase</a>
<p class="pl-4 pr-4 ">Expert</p>
</div>
<div class="card-body collapsed" id="collapse">
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<div class="form-group"><label for="id_form-3-skill">Skill:</label><input type="text" name="form-3-skill" value="Firebase" class="form-control form-control-md skill" placeholder="Enter Skill" autocomplete="off" id="id_form-3-skill"></div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="id_form-3-level">Level:</label>
<div class="range">
<input type="range" name="form-3-level" value="5" step="1" min="1" max="5" class="form-control-md range-input level" id="id_form-3-level">
<div class="range__ticks"><span class="range__tick"><span class="range__tick-text">1</span></span><span class="range__tick"><span class="range__tick-text">2</span></span><span class="range__tick"><span class="range__tick-text">3</span></span><span class="range__tick"><span class="range__tick-text">4</span></span><span class="range__tick"><span class="range__tick-text">5</span></span></div>
</div>
</div>
</div>
</div>
<div class="form-group mb-3"><input type="hidden" name="form-3-form_type" value="skills" id="id_form-3-form_type"></div>
</div>
</div>
</div>
</div>
<div class="accordion accordion-icon accordion-boxed accordion-plus mb-3 skills-card ui-sortable-handle">
<div class="delete-icon delete-icon-skills"><i class="fas fa-trash-alt"></i></div>
<div class="card">
<div class="card-header">
<a href="#collapse" class="expand pb-0">Google GCloud</a>
<p class="pl-4 pr-4 ">Experienced</p>
</div>
<div class="card-body collapsed" id="collapse">
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<div class="form-group"><label for="id_form-2-skill">Skill:</label><input type="text" name="form-2-skill" value="Google GCloud" class="form-control form-control-md skill" placeholder="Enter Skill" autocomplete="off" id="id_form-2-skill"></div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="id_form-2-level">Level:</label>
<div class="range">
<input type="range" name="form-2-level" value="4" step="1" min="1" max="5" class="form-control-md range-input level" id="id_form-2-level">
<div class="range__ticks"><span class="range__tick"><span class="range__tick-text">1</span></span><span class="range__tick"><span class="range__tick-text">2</span></span><span class="range__tick"><span class="range__tick-text">3</span></span><span class="range__tick"><span class="range__tick-text">4</span></span><span class="range__tick"><span class="range__tick-text">5</span></span></div>
</div>
</div>
</div>
</div>
<div class="form-group mb-3"><input type="hidden" name="form-2-form_type" value="skills" id="id_form-2-form_type"></div>
</div>
</div>
</div>
</div>
<div class="accordion accordion-icon accordion-boxed accordion-plus mb-3 skills-card ui-sortable-handle">
<div class="delete-icon delete-icon-skills"><i class="fas fa-trash-alt"></i></div>
<div class="card">
<div class="card-header">
<a href="#collapse" class="expand pb-0">Flutter</a>
<p class="pl-4 pr-4 ">Experienced</p>
</div>
<div class="card-body collapsed" id="collapse">
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<div class="form-group"><label for="id_form-4-skill">Skill:</label><input type="text" name="form-4-skill" value="Flutter" class="form-control form-control-md skill" placeholder="Enter Skill" autocomplete="off" id="id_form-4-skill"></div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="id_form-4-level">Level:</label>
<div class="range">
<input type="range" name="form-4-level" value="4" step="1" min="1" max="5" class="form-control-md range-input level" id="id_form-4-level">
<div class="range__ticks"><span class="range__tick"><span class="range__tick-text">1</span></span><span class="range__tick"><span class="range__tick-text">2</span></span><span class="range__tick"><span class="range__tick-text">3</span></span><span class="range__tick"><span class="range__tick-text">4</span></span><span class="range__tick"><span class="range__tick-text">5</span></span></div>
</div>
</div>
</div>
</div>
<div class="form-group mb-3"><input type="hidden" name="form-4-form_type" value="skills" id="id_form-4-form_type"></div>
</div>
</div>
</div>
</div>
<div class="accordion accordion-icon accordion-boxed accordion-plus mb-3 skills-card ui-sortable-handle">
<div class="delete-icon delete-icon-skills"><i class="fas fa-trash-alt"></i></div>
<div class="card">
<div class="card-header">
<a href="#collapse" class="expand pb-0">Java</a>
<p class="pl-4 pr-4 ">Skillful</p>
</div>
<div class="card-body collapsed" id="collapse">
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<div class="form-group"><label for="id_form-5-skill">Skill:</label><input type="text" name="form-5-skill" value="Java" class="form-control form-control-md skill" placeholder="Enter Skill" autocomplete="off" id="id_form-5-skill"></div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="id_form-5-level">Level:</label>
<div class="range">
<input type="range" name="form-5-level" value="3" step="1" min="1" max="5" class="form-control-md range-input level" id="id_form-5-level">
<div class="range__ticks"><span class="range__tick"><span class="range__tick-text">1</span></span><span class="range__tick"><span class="range__tick-text">2</span></span><span class="range__tick"><span class="range__tick-text">3</span></span><span class="range__tick"><span class="range__tick-text">4</span></span><span class="range__tick"><span class="range__tick-text">5</span></span></div>
</div>
</div>
</div>
</div>
<div class="form-group mb-3"><input type="hidden" name="form-5-form_type" value="skills" id="id_form-5-form_type"></div>
</div>
</div>
</div>
</div>
</div>
If you look at the HTML Source, each set(accordion) unique ids and form field names for the form labels and inputs as in id_form-0-skill, id_form-0-level, form-0-skill, id_form-1-skill,id_form-1-skill, form-1-skill, id_form-1-level, id_form-1-skill,id_form-2-skill, form-2-skill, id_form-2-level, id_form-2-skill, etc.
What would be the way to update these values to the current sorted position? Here is the JQuery-ui current sorting method:
$( function() {
$( ".skills-sortable" ).sortable({
connectWith: ".skills-cards",
beforeStop: function( event, ui ) {
console.log(ui)
console.log(event)
}
}).disableSelection();
} );