vue draggable test

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
  <!--<script data-require="bootstrap@*" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> -->
  <script data-require="vue2@*" data-semver="2.5.13" src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script data-require="vuex@*" data-semver="2.0.0" src="https://unpkg.com/vuex@2.0.0/dist/vuex.min.js"></script>
  <script data-require="lodash.js@*" data-semver="4.17.4" src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
  <script data-require="vue-strap@1.0.11" data-semver="1.0.11" src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.0.11/vue-strap.min.js"></script>



  <script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
  <!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.19.2/vuedraggable.umd.min.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div id="app">
<label>Sortable Options</label>
    <div class="col-12">

      <div>
        <!-- Classification Dropdown -->
        <select v-model="selectedOption">
          <option value="" disabled>--please select--</option>
          <option v-for="(classification,index) in classifications" :value="classification">{{classification}}</option>
        </select>
        <input type="button" v-on:click="addSelection(selectedOption)" value="ADD" />
      </div>

      <!-- Selected Classification Options-->
      <draggable tag="ul" v-model="selections" @start="drag=true" @end="drag=false" handle=".sortCell">
        <li v-for="selection in selections" :key="selection.drpSortId">
          <div class="sortCell">{{selection.drpDisplayLabel}} <span @click="removeAt(selection)">X</span></div>
        </li>
      </draggable>



    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>

// Code goes here

//Mock JSON object we want to save
var MOCK_OBJ = {
  itemBaseSku: 'BaseSKU',
  itemBasePrice: 10,
  itemOption: [{
    drpDisplayLabel: 'Color',
    drpSortId: 2
  }, {
    drpDisplayLabel: 'Size',
    drpSortId: 1
  }]
}

//Classification list Array
var MOCK_ClassOption = ['Color', 'Size', 'Shape', 'Second Color'];



const app = new Vue({
  el: '#app',
  data: {
    classifications: MOCK_ClassOption,
    selections: MOCK_OBJ.itemOption,
    selectedOption: ''
  },
  methods: {
    removeAt(idx) {
      //Clicking on X removes the element from the list
        this.selections.splice(idx, 1);
      },
      addSelection() {
        //Selecting option in classification drop-down and adding it to draggable list
        var currLength = this.selections.length + 1;
        var option = {
          drpDisplayLabel: this.selectedOption,
          drpSortId: currLength
        }
       if(!_.some(this.selections, ['drpDisplayLabel' ,this.selectedOption])){
        this.selections.push(option);
         
       }
        
        //Reseting the drop-down
        this.selectedOption = "";
      }
  }
})

/* Styles go here */
.sortCell {
	background-repeat: no-repeat;
	background-position: center 4px;
	cursor: move;
	display: block;
}

ul {
  list-style-type: none;
}

Learning vue-draggable plugin