为什么 jQuery UI Sortable 不再重新排序元素？答案

【问题标题】：Why is jQuery UI Sortable not reordering the elements anymore?为什么 jQuery UI Sortable 不再重新排序元素？
【发布时间】：2014-07-28 14:27:31
【问题描述】：

我创建了一个可拖动和可排序的项目。您应该能够将下拉元素向上拖动到红色框上。该元素将出现在红色框中，而一些新的表单元素将出现在蓝色框中。然后，您应该能够将更多元素拖到红色框上，并重新排列它们。它应该像 jQuery 中的 this example 一样。我实际上并没有处理对象的放置，我把它留给 jQuery。

目前我可以将新元素添加到红色框中，但现有元素不会移动以允许我将新元素放置在列表中的任何位置。此外，当我尝试重新组织现有列表时，当我选择一个元素时，它将出现在第一个位置，我可以拖动它，列表不会再次反应，当我尝试将它放在列表中的其他位置时只会掉在原来的地方。

Sortable 在<div id="visual_form" class="sortable col-md-6">place data here</div> 的html 中设置，并且在JS 文件中为它设置的所有事件似乎仍在触发。

$(".sortable").sortable({
    over: function() {
      removeIntent = false;
    },
    out: function() {
      removeIntent = true;
    },
    beforeStop: function(event, ui) {
      if (removeIntent === true) {
        var element_id = ui.item[0].id;
        model.remove_element(element_id);
        element_view.remove_element(ui.item);
      }
    },
    stop: function(event, ui) {
      var element = ui.item;
      var new_element = element_view.add_element(element, id);
      if (new_element) {
        var form_element_type = element[0].classList[0];
        var form_data = model.add_element_information_to_model(id, form_element_type);
        data_view.add_element(id, form_data);
        id++;
      }
      var list_of_element_ids = element_view.get_order_of_elements();
      data_view.update_order(list_of_element_ids);
      model.reorder_elements(list_of_element_ids);
    }
  });

这些函数实际上都不会影响红框中元素的布局。有些会影响蓝框，但这是对红框中发生的事情的独立反应。

我不知道是不是我搞砸了关于 jQuery 和 Sortable 的问题，或者只是我编写的一些代码，但我认为 html 本身可能有问题。什么取消了可排序功能？

查看代码here

【问题讨论】：

i.imgur.com/O5Ifvrw.gif
@j08691 公平点，但这是问题的一部分，在这种情况下，我不确定在这种情况下什么代码是相关的。
一般来说，您应该始终将有问题的代码发布到问题中。如果您不确定要发布什么代码，请花几分钟时间将代码缩减为最低限度的示例。
@j08691：我的咖啡现在摆满了我的桌子——但那是一个光荣的表情包。

标签： jquery jquery-ui-draggable jquery-ui-sortable

【解决方案1】：

在我看来您可能使用了错误的选择器：

试试：

$("#form_display").sortable({});

或者：尝试将可排序类添加到#form_display

我确实对此进行了测试，并且这些盒子是可分类的。希望这可以帮助！如果您有任何问题，请告诉我。

【讨论】：

【解决方案2】：

我发现了问题，在 HTML 中我使用 bootstrap 设置列大小

<div class="dropDown form-group draggable">
          <div>
            <label class="col-xs-12">dropdown</label>
          </div>
          <div class="form-group">
            <select class="form-control col-xs-12">
              <option value="option1">Option 1</option>
              <option value="option2">Option 2</option>
            </select>
          </div>
        </div>

我必须更深入地挖掘col-xs-12 的原因，它又开始工作了。

稍后我可以使用 toggleClass 添加引导列。

【讨论】：