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

Posted 2023-05-08

【中文标题】jQuery UI Sortable：在列之间拖动元素时记录起点和终点

【英文标题】：jQuery UI Sortable: Log origin and destination when dragging elements between columns

【发布时间】：2020-08-16 15:20:26

【问题描述】：

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

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

似乎变量 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>

【参考方案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');
        
      );
    

  );