Доступ к идентификатору данных как перетаскиваемого элемента, так и замененного элемента, используя SortableJS - PullRequest
Новая
       33

Доступ к идентификатору данных как перетаскиваемого элемента, так и замененного элемента, используя SortableJS

1 голос
/ 11 апреля 2020

Я могу получить доступ к идентификатору перетаскиваемого элемента (см. Код ниже), но не уверен, как также получить идентификатор замененного элемента.

JS: 

Sortable.create(selection, {
  handle: '.bars-move',
  animation: 150,

  onStart: function (/**Event*/evt) {
    var itemEl = evt.item;
    var data_id = itemEl.getAttribute("data-id");
    },
});

Есть идеи, пожалуйста?

1 Ответ

1 голос
/ 11 апреля 2020

При onStart сохранить текущий список идентификаторов, а при onEnd обратиться к этому списку, используя evt.newIndex. 

var originalList;

var sortable = new Sortable(document.getElementById('items'), {
  onStart: function(evt) {
    originalList = [...document.querySelectorAll("#items > div")].map(el => el.id);
  },

  onEnd: function(evt) {
    console.log("Dragged id: " + evt.item.id + 
            " - Replaced id: " + originalList[evt.newIndex]);
  }
});
.list-group-item { font-size: 10px; padding: 1px 5px!important; width: 150px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="items" class="list-group col">
  <div id="item1" class="list-group-item">Item 1</div>
  <div id="item2" class="list-group-item">Item 2</div>
  <div id="item3" class="list-group-item">Item 3</div>
  <div id="item4" class="list-group-item">Item 4</div>
  <div id="item5" class="list-group-item">Item 5</div>
  <div id="item6" class="list-group-item">Item 6</div>
</div>
...