为什么jQuery UI不能再对元素重新排序了？

Question

我已经创建了一个可拖动和排序的项目。您应该能够将下拉元素向上拖动到红色框上。该元素将显示在红色框中，一些新的表单元素将显示在蓝色框中。然后，您应该能够将更多元素拖到红色框上，并对其重新排序。它的行为应该与jQuery中的示例类似。我实际上并不处理对象的放置，而是将其留给jQuery处理。

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

在html中设置了Sortable

$(".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本身可能有问题。什么是取消可排序功能？

请参见此处的代码




Answer 1

我发现了问题，在超文本标记语言中，我使用引导来设置列大小

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

我必须再深入一点，找出它重新开始工作的原因。

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

Answer 2

在我看来你可能用错了选择器：

尝试：

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

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

我做了测试，盒子是可以分类的。希望这能有所帮助！让我知道，如果你有问题。