как javascript drag-and-drop можно выполнить, переупорядочив массив

Question

У меня есть такой массив:

sortItems: {
      type: Array,
      value: [{
        value: 1,
        label: 'element1'
      }, {
        value: 2,
        label: 'element2'
      }, {
        value: 3,
        label: 'element3'
      }]
    }

Я отображаю эти элементы массива внутри dom, а также они должны быть перетаскиваемыми. Но теперь перетаскивание содержимого завершено. но массив не обновляется в соответствии с перетаскиванием. Мне нужен этот переупорядоченный массив после перетаскивания.

Я работаю над полимером 1.0 HTML, javascript

HTML-код указан ниже:

<paper-dialog-scrollable>
  <template is="dom-repeat" items="[[sortItems]]">
    <paper-card>
      <div id="draggable" draggable="true"
           on-drag-start="dragStartHandler(event)" on-drag-leave="dragLeaveHandler(event)"
           on-drag-enter="dragEnterHandler(event)" on-drag-end="dragEndHandler(event)"
           on-drop="dropHandler(event)" on-drag-over="dragOverHandler(event)">
        <label>[[ item.label ]]
        </label>
      </div>
    </paper-card>
  </template>
</paper-dialog-scrollable>

Javascript это:

listeners: {
  'dragover': 'dragOverHandler',
    'dragleave': 'dragLeaveHandler',
    'drop': 'dropHandler',
    'dragstart': 'dragStartHandler',
    'dragenter': 'dragEnterHandler',
    'dragend': 'dragEndHandler'
},
dragLeaveHandler: function(e) {
  e.stopPropagation();
  this.classList.remove('over');
},
dragOverHandler: function(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  return false;
},
dropHandler: function(e) {
  if (this.dragSrcEl.id === e.target.id) {
    this.dragSrcEl.innerHTML = e.target.innerHTML;
    e.target.innerHTML = e.dataTransfer.getData('text/html');
  }
  return false;
},
dragStartHandler: function(e) {
  e.target.style.opacity = '0.4';
  this.dragSrcEl = e.target;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', e.target.innerHTML);
},
dragEnterHandler: function() {
  this.classList.add('over');
},
dragEndHandler: function(e) {
  var listItems = document.querySelectorAll('.draggable');
  [].forEach.call(listItems, function(item) {
    item.classList.remove('over');
  });
  e.target.style.opacity = '1';
}

Пожалуйста, помогите мне сделать это. Заранее спасибо !!