Question

我在BS中创建了一个仪表板网格，希望能够使用Sortable拖动磁贴 - 这本身工作正常，但行为确实无法预测。

我有一个6 x 4网格，例如，如果我将一个项目从第2行移动到第1行，那么该项目就会正确移动到位，但是它正在替换的项目跳到第2行，其他一切都向下移动一排，所以我现在最终得到6 x 5网格。

此外，在大多数情况下，我实际上无法将项目直接移动到第2行，因此我需要开始移动所有其他区域，其中每个区域也有类似的问题，使其再次恶化。

我用于排序的代码是：

Dictionary<string, List<string>> myDic = new Dictionary<string, List<string>>();
// populate the dictionary
var colNames = new List<string>() { "col1", "col2"};
IEnumerable[] columns = new IEnumerable[2];
columns[0] = myDic.Keys; 
columns[1] = myDic.Values;

var mydata = engine.CreateDataFrame(columns.ToArray(), colNames.ToArray(), stringsAsFactors: false);

我没有发布所有HTML代码，而是创建了一个小提琴，显示了这一点。

如果将红色面板移动到顶行，您将看到添加其他行的行为，如果您尝试将蓝色面板拖动到现在的第二行，则无法轻松完成。

https://jsfiddle.net/mk3whz43/2/

Answer 1

我认为html结构过于复杂，无法与当前代码一起使用。当您移动项目时，它会被附加/预先添加到应与其交换的项目的父div，从而破坏内容的结构。

您需要做的是将要排序的项目的父div存储在变量中，并将目标项.append存储到此div。当你启动排序时，你仍会看到“跳跃”，但实际的项目排序将起作用。

这是更新的代码（我在代码中添加了注释以解释我所做的事情）：

$(function() {
  var startParent;
  $(".sortable-heading").sortable({
    connectWith: '.heading-sortable',
    items: '.panel',
    helper: 'original',
    cursor: 'move',
    handle: '.panel-title, [data-action=move]',
    revert: 100,
    grid: [10, 10],
    delay: 150,
    containment: '#home-dash',
    forceHelperSize: true,
    opacity: 0.7,
    placeholder: 'sortable-placeholder',
    forcePlaceholderSize: true,
    tolerance: 'pointer',
    start: function(e, ui) {
      ui.placeholder.height(ui.item.outerHeight());
      //Store the parent in a variable as we will be appending the target item to this in the "update" event.
      startParent = $(ui.item).closest('.col-xs-2');
    },
    update: function(e, ui) {
      //When an item is swapped, it may have been added before the existing item or after it.
      //Check if the contents of the "next" item is not undefined. If it is undefined, it means
      //the item was inserted before the existing item. 
      if ($(ui.item).next()[0] !== undefined) {
        //next() is the existing item.
        startParent.append($(ui.item).next());
      } else {
        startParent.append($(ui.item).prev());
      }
    }
  });
});

<强> Updated Fiddle

Answer 2

bhttoan，

这是预期的行为。当您再添加一个 col-xs-2 时。所以，最后一项将被推到下一行。要解决这个问题，你需要有一个所有人都有 div与班级行（4x6 = 24件）。然后保留你的结构。

jQuery UI可排序和引导网格

2 个答案: