Есть ли способ получить вложенную сортировку в HTML при использовании Jquery-UI - PullRequest
Новая
       14

Есть ли способ получить вложенную сортировку в HTML при использовании Jquery-UI

1 голос
/ 27 марта 2019

Я создал область перетаскивания, которая генерирует элементы списка при перетаскивании, которая работает вертикально, но мне нужна горизонтальная поддержка. Я просто хочу, чтобы элемент "переместился" в сторону , когда над ним находится другой элемент.

Я пытался создать невидимую сетку, чтобы определить, где находится поле, но это не работает при сортировке элементов 

<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, который создает формы, поэтому у меня нет этих двух доступных для моего текущего стека.

1 Ответ

0 голосов
/ 29 марта 2019

Я думаю, вы, возможно, пытаетесь сделать его более сложным, чем нужно. Рассмотрим следующий код. 

$(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% по умолчанию. Если вы поменяете дисплей или поместите их, вы можете расположить их рядом.

Надеюсь, это поможет.

...