jQuery Пользовательский интерфейс сортируемый: регистрировать происхождение и назначение при перетаскивании элементов между столбцами

Question

Мне нужно, чтобы при перемещении сортируемых элементов между столбцами, предыдущим столбцом и столбцом, в который перетаскивается элемент, оба регистрировались и чтобы можно было зарегистрировать это изменение.

Как вы можете видеть, я пытался отправить «Мой родитель изменился» на консоль всякий раз, когда атрибут приоритета данных целевого столбца не соответствует атрибуту исходного столбца, и добавить обновленный класс к перетаскиваемому элементу, но нет безуспешно, так что, возможно, я делаю что-то не так?

Кажется, переменная rootParent установлена ​​как для атрибута приоритета данных исходного столбца, так и для нового столбца, а это не то, что мне нужно

$(document).ready(function() {
  $('.quadrants').sortable({
    connectWith: '.quadrants',
    cursor: 'move',
    dropOnEmpty: true,
    update: function(e, ui) {
      var rootParent = $(e.target).attr('data-priority');
      console.log(rootParent);
      $(this).children().each(function(index) {
        if ($(this).parent().attr('data-priority') != rootParent) {
          console.log('My parent has changed');
          $(this).addClass('updated');
        }
      });
    }

  });
});

.quadrants {
  background: #FFFFFF;
  margin: 2px;
  border-radius: 4px;
  border: 1.5px solid #d4dce2;
  min-height: 160px !important;
  padding: 3px !important;
}
.quadrants>div {
  font-family: sans-serif;
  font-size: 1em;
  padding: 10px;
  margin: 5px !important;
  background: #C1FFF8;
  border-radius: 4px;
}
.updated{
  background: #FFD2C1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container row">
  <div class="quadrants col-xs-3" data-priority="1">
    <div>
      Draggable
    </div>
    <div>
      Draggable
    </div>
  </div>
  <div class="quadrants col-xs-3" data-priority="2">
    <div>
      Draggable
    </div>
  </div>
  <div class="quadrants col-xs-3" data-priority="3">
    <div>
      Draggable
    </div>
  </div>
</div>

Answer 1

Я отказался от использования Sortable для получения атрибутов столбцов и вместо этого использовал Droppable в сочетании с Sortable, чтобы получить журнал упорядочения элементов внутри столбцов

$( ".quadrants" ).droppable({
      accept: ".tasks",
      drop: function( e, ui ) {
        var draggedElement = ui.draggable;
        var newColumn = [];
        newColumn.push([draggedElement.attr('data-index'), $(e.target).attr('data-priority')]);
        console.log(newColumn);
        console.log('My parent changed');
      }
    });

  $('.quadrants').sortable({
    connectWith: '.quadrants',
    cursor: 'move',
    dropOnEmpty: true,
    update: function(e, ui) {
      $(this).children().each(function(index) {
        if ($(this).parent().attr('data-priority') != index+1) {
          $(this).attr('data-position', (index+1)).addClass('updated');
          console.log('My position changed');
        }
      });
    }

  });