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

Question

我需要，当在列之间移动可排序元素时，前一列和元素被拖入的列都被记录下来，并且能够注册此更改。

如您所见，每当目标列的数据优先级属性与原始列的属性不匹配时，我尝试将 'My parent has changed' 发送到控制台，并将更新的 class 添加到拖动的元素，但是无济于事，也许我做错了什么？

变量 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');
        }
      });
    }

  });

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

jQuery UI Sortable: Log origin and destination when dragging elements between columns

html

javascript

jquery

jquery-ui

jquery-ui-sortable