有没有一种方法可以在使用Jquery-ui时在HTML中获取嵌套排序

Question

我创建了一个拖放区域，该区域在拖放时生成列表元素，该元素在垂直方向上有效，但我需要水平支撑。我只是希望一个元素在其上方悬停另一个元素时“移动”到侧面。

我尝试制作一个不可见的网格来确定盒子在哪里，但是在对元素进行排序时不起作用

  - name: docker.elastic.co/elasticsearch/elasticsearch:6.5.3
    alias: elasticsearch
    command: [ "bin/elasticsearch", "-Ediscovery.type=single-node" ]

JS文件：

var employee = new Employee();
employee.FirstName = GetFirstName();  // this may get values from db

现在，代码可以实际运行了，但是由于我真的不知道如何执行此操作。所需的结果类似于https://codepen.io/devpriya/pen/zGdrzP，但它内置在Node中，并带有Angular。我目前正在使用Wordpress插件来创建表单，因此我当前的堆栈中没有这两个插件。

Answer 1

我认为您可能正在尝试使其变得比所需的复杂。考虑下面的代码。

$(function() {
  function makeDrag(o) {
    o.draggable({
      handle: ".fa-grip-lines",
      helper: "clone",
      revert: "invalid",
      connectToSortable: '.dropzone',
      revertDuration: 300,
      opacity: 0.5
    });
  }

  function addField(t) {
    var li = $("<li>", {
      class: "builder-elements-wrap item"
    }).appendTo(t);
    var el = $("<input>", {
      class: "builder-input",
      type: "text",
      name: "data[builderField]",
      placeholder: "Write something..."
    }).appendTo(li);
    var h = $("<i>", {
      class: "handle fas fa-fw fa-grip-lines"
    }).appendTo(li);
  }

  function addButton(t) {
    var li = $("<li>", {
      class: "builder-elements-wrap item"
    }).appendTo(t);
    var el = $("<input>", {
      class: "builder-button",
      type: "submit",
      value: "Submit"
    }).appendTo(li);
    var h = $("<i>", {
      class: "handle fas fa-fw fa-grip-lines"
    }).appendTo(li);
  }

  function addSlide(t) {
    var li = $("<li>", {
      class: "builder-elements-wrap item"
    }).appendTo(t);
    var el = $("<input>", {
      class: "builder-slider",
      type: "range",
      value: 50,
      min: 0,
      max: 100
    }).appendTo(li);
    var v = $("<label>", {
      class: ".builder-slider-label"
    }).html("Value:").appendTo(li);
    $("<span>", {
      class: "builder-slider-value"
    }).html(50).appendTo(v);
    var h = $("<i>", {
      class: "handle fas fa-fw fa-grip-lines"
    }).appendTo(li);
  }

  function addList(t) {
    var li = $("<li>", {
      class: "builder-elements-wrap item"
    }).appendTo(t);
    var el = $("<ol>", {
      class: "builder-list",
    }).appendTo(li);
    $("<li>", {
      class: "builder-list-item"
    }).html("Item 1").appendTo(el);
    $("<li>", {
      class: "builder-list-item"
    }).html("Item 2").appendTo(el);
    $("<li>", {
      class: "builder-list-item"
    }).html("Item 3").appendTo(el);
    var h = $("<i>", {
      class: "handle fas fa-fw fa-grip-lines"
    }).appendTo(li);
  }


  makeDrag($(".drag-drop"));

  if ($('.dropzone').length == 1) {
    $('.dropzone li:eq(0)').append(
      $('<p class="noDropText">').text("You haven't added any elements yet, add some!")
    );
  }

  $(".dropzone").sortable({
    handle: ".handle",
    placeholder: ".builder-placeholder",
    opacity: 0.75,
    receive: function(e, ui) {
      if ($('.dropzone .empty-insert').length == 1) {
        $('.dropzone').html("");
      }
      switch (true) {
        case ui.helper.hasClass("input"):
          console.log("Input Dropped");
          addField($(this));
          break;
        case ui.helper.hasClass("form-button"):
          console.log("Button Dropped");
          addButton($(this));
          break;
        case ui.helper.hasClass("slider"):
          console.log("Slider Dropped");
          addSlide($(this));
          break;
        case ui.helper.hasClass("list"):
          console.log("List Dropped");
          addList($(this));
          break;
      }
      ui.helper.remove();
    },
    over: function(event, ui) {
      if ($('.noDropText').length) {
        $('.noDropText').data("content", $('.noDropText').html()).html("&nbsp;");
      }
    },
    out: function() {
      if ($('.dropzone').find('.builder-elements').length === 0) {
        $('.noDropText').html($('.noDropText').data("content"));
      }
    }
  });
});

#jvformbuilder_menu {
  display: block;
  width: 100%;
}

#jvformbuilder-element-menu .drag-drop {
  display: inline-block;
  padding: .4em;
  background: #ccc;
  border-radius: 3px;
  width: 20%;
}

#jvformbuilder-element-menu .drag-drop .fa-grip-lines {
  float: right;
  cursor: grab;
}

#outer-dropzone {
  padding: 5px;
  list-style: none;
  border: 1px solid #ccc;
  border-radius: 3px;
}

#outer-dropzone .item {
  display: inline;
  background: #999;
  padding: .4em;
  border-radius: 3px;
  margin-right: 3px;
}

.builder-placeholder {
  width: 100px;
}

.builder-slider {
  display: inline-block;
}

.builder-slider-label {
  font-size: .65em;
  padding: 0 1px;
}

.builder-list {
  padding-left: 1em
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="jvformbuilder_menu">
  <div id="jvformbuilder-element-menu">
    <div class="formField drag-drop input">
      <i class="fas fa-fw fa-pencil-alt"></i> Field
      <i class="fas fa-fw fa-grip-lines"></i>
    </div>
    <div class="formField drag-drop form-button">
      <i class="far fa-fw fa-dot-circle"></i> Button
      <i class="fas fa-fw fa-grip-lines"></i>
    </div>
    <div class="formField drag-drop slider">
      <i class="fas fa-fw fa-sliders-h"></i> Slider
      <i class="fas fa-fw fa-grip-lines"></i>
    </div>
    <div class="formField drag-drop list">
      <i class="fas fa-fw fa-list-ul"></i> List
      <i class="fas fa-fw fa-grip-lines"></i>
    </div>
  </div>
</div>

<div id="contentWrap">
  <ul id="outer-dropzone" class="jvformbuilder_results dropzone">
    <li class="builder-elements-wrap empty-insert"></li>
  </ul>
</div>

将项目拖到列表中时，它会将其转换为HTML元素。 li元素与大多数元素一样使用框定界。因此，block默认为100％。如果您更改显示或浮动它们，则可以将它们并排放置。

希望有帮助。