jQuery UI Sortable：在列之间拖动元素时记录起点和终点

Question

我需要在列之间移动Sortable元素时，将前一列和将元素拖动到其中的列都记录下来，并能够注册此更改。

您可以看到，当目标列的data-priority属性与原始列的属性不匹配时，我试图发送“我的父母已更改”到控制台，并向拖动的元素添加更新的类，但无济于事，所以也许我做错了什么？

似乎变量rootParent被设置为原始列数据优先级attr以及新列的优先级，这不是我想要的

$(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

$( ".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');
        }
      });
    }

  });