Question

我创建了一个可拖动且可排序的项目。您应该能够将下拉元素向上拖动到红色框上。该元素将出现在红色框中，并且一些新的表单元素将出现在蓝色框中。然后，您应该能够将更多元素拖到红色框上，然后重新排序。它应该像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

Answer 1

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

尝试：

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

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

我测试了这个，盒子是可以分类的。希望这可以帮助！如果您有疑问，请告诉我。

Answer 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添加bootstrap列。

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

2 个答案: