有没有办法在使用 Jquery-ui 时在 HTML 中获取嵌套排序

Question

我创建了一个拖放区域，可以在拖放时生成列表元素，它可以垂直工作，但我想要水平支持。我只是想让一个元素在另一个元素悬停在其上方时">移动"到一边。

我尝试制作一个不可见的网格来确定框的位置，但这在对元素进行排序时不起作用

<div id="jvformbuilder_menu">
    <div id="jvformbuilder-element-menu">
        <div class="formField drag-drop input">
            <p>
                <i class="fas fa-fw fa-pencil-alt"></i>
                Field
                <i class="fas fa-fw fa-grip-lines"></i>
            </p>
        </div>
        <div class="formField drag-drop form-button">
            <p>
                <i class="far fa-fw fa-dot-circle"></i>
                Button
                <i class="fas fa-fw fa-grip-lines"></i>
            </p>
        </div>
        <div class="formField drag-drop slider">
            <p>
                <i class="fas fa-fw fa-sliders-h"></i>
                Slider
                <i class="fas fa-fw fa-grip-lines"></i>
            </p>
        </div>
        <div class="formField drag-drop list">
            <p>
                <i class="fas fa-fw fa-list-ul"></i>
                List
                <i class="fas fa-fw fa-grip-lines"></i>
            </p>
        </div>
   </div>
</div>
<div id="contentWrap">
<ul id="outer-dropzone" class="jvformbuilder_results dropzone">
    <li class="builder-elements-wrap empty-insert"></li>
</ul>
</div>

JS文件：

function drag() {
$(".drag-drop").draggable({
    helper: "clone",
    revert: "invalid",
    connectToSortable: '.dropzone',
    revertDuration: 300,
    start: function (e) {
        $(e.target).css({ opacity: 0.5 });
    },
    stop: function (e) { // need to put it back on stop
        $(e.target).css({ opacity: 1 });
    },
});
if($('.dropzone').length == 1){
    $('.dropzone').append(
        $('<p class="noDropText">').text("You haven't added any elements yet, add some!")
    )
}
$('.builder-elements-wrap').sortable({
    placeholder: "ph",
    opacity: 0.5,
});
$(".dropzone").sortable({
    placeholder: "ph",
    opacity: 0.5,
    stop: function( event, ui ) {
        if($('.noDropText').length){
            $('.noDropText').remove();
        }
        var id = ui.item.attr("class");
        if (id == "formField drag-drop input ui-draggable ui-draggable-handle ui-draggable-dragging") {
                var myElement = $('<li class="builder-elements-wrap item">').append(
                    $('<div class="builder-elements" id="input-element">').append(
                            $('<input class="builder-input" type="text" name="data[builderField]" placeholder ="Write something..." />'),
                            $('<div class="dragHandle"><i class="fas fa-arrows-alt">')
                    )
                );
                $(ui.item).replaceWith(myElement);
                $(myElement).children('.builder-elements').animate({ width: '98.5%' })

        }
        else if (id == "formField drag-drop form-button ui-draggable ui-draggable-handle ui-draggable-dragging") {
            var myElement = $('<li class="builder-elements" id="button-element">').append(
                $('<input class="builderButton" type="submit" value="Submit">'),
                $('<div class="dragHandle"><i class="fas fa-arrows-alt">')
            );
            $(ui.item).replaceWith(myElement);
            $('.builder-elements').animate({ width: '99.5%' });
        }
        else if (id == "formField drag-drop slider ui-draggable ui-draggable-handle ui-draggable-dragging") {
            var myElement = $('<li class="builder-elements" id="slider-element">').append(
                $('<input type="range" min="1" max="100" value="50" class="builderSlider" id="range"><p>Value: <span id="sliderValue"></span></p>'),
                $('<div class="dragHandle"><i class="fas fa-arrows-alt">')
            );
            $(ui.item).replaceWith(myElement);
            $('.builder-elements').animate({ width: '99.5%' });
            // JS for formbuilder's slider element.
            var slider = document.getElementById("range");
            var output = document.getElementById("sliderValue");
            output.innerHTML = slider.value;
            slider.oninput = function () {
                output.innerHTML = this.value;
            }
        }
        else if (id == "formField drag-drop list ui-draggable ui-draggable-handle ui-draggable-dragging") {
            var myElement = $('<li class="builder-elements" id="list-element">').append(
                $('<ul class="builderList">').append(
                    $('<li class="builderListItem">').text("item 1"),
                    $('<li class="builderListItem">').text("item 2"),
                    $('<li class="builderListItem">').text("item 3")
                ),
                $('<div class="dragHandle"><i class="fas fa-arrows-alt">')
            );
            $(ui.item).replaceWith(myElement);
            $('.builder-elements').animate({ width: '99.5%' });
        }
$(".dropzone").droppable({
    activeClass: "dropActive",
    hoverClass: "dropHover",
    over: function(event, ui) {         
        $('.noDropText').css('display', 'none');
    },
    out: function () {
        if ($('.dropzone').find('.builder-elements').length === 0) {
            $('.noDropText').css('display', 'block');
        }
    }
});
}

现在代码确实可以工作，但我真的不知道该怎么做。期望的结果是这样的 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%。如果更改显示或浮动它们，则可以让它们并排放置。

希望有帮助。