How to save the sortable list Order

Question

I'm using meteor platform. I have developed a dash board.

Now iI want to save the order of sorted list when user click save button and display in the same order that he had saved.

I achieved sortable using Dragula package.

status.js

Template.status.events({
'click .outr':function(){
  var drake=dragula([document.querySelector('.sortable-items')]);  
  },
});

status.html

<div class="ui bottom attached segment" style="border-radius:0.5em;margin-left:0.0%; overflow:hidden;padding:0 0 0 0;">
  <div class="ui menu grids vbox " style="border-radius:0.5em;margin-top:0; overflow:hidden;" id="vbox">
    {{#each getDash}}      
      <div class=" column equal width aligned padded center aligned outr">
        <div class="ui vertical allifluid small menu hand rock icon " style="background-color:lightgray;  border: 0.5px solid black;">
          <center><p class="handle" style="width:4 5 6 2">{{this.project}}</p></center>
          <div class="sortable-items" >
          {{#each listjobName project}}
            <div class="ui inverted small menu jbox" style="background-color:{{getStatusColor buildStatus}};   border: 1px solid black;">
            <p id="viewJob" class="under" ><h5>{{this.job}}</h5></p>
            </div>
          {{/each}}
          </div>
        </div>
      </div>
    {{/each}}
  </div>
</div>

In status.html this.project and this.job fetch from Database using helper getDash and listjobName respectively.

Answer 1

Just store the order inside a document in a collection. For example you could use a Collection called Projects. And the data structure would look like that:

{
    _id: 'herh52rh48a6eh7a86e7hz'
     projectName: 'tes1';
     jobs : [
          {
               id: 54845 (Random generated id)
               name: 'job1',
               order: 1
          },
          {
               id: 87813
               name: 'job2',
               order: 2
          },
          {
               id: 54369
               name: 'job3',
               order: 3
          },
     ]
}

For each job, you have a field order:

You need to use the array 'jobs' to display your job list. And when you click on save you have to get the jobs and their order. And store it in the database.

I don't know how to do it with dragula, so i will let you find a way. Maybe this answer will give you an idea.