Как поместить элемент в сортируемый список jquery-ui внутри другого элемента в этом списке - PullRequest
Новая
       35

Как поместить элемент в сортируемый список jquery-ui внутри другого элемента в этом списке

1 голос
/ 07 июня 2019

У меня есть сортируемый список с использованием jquery-ui: 

<div id="sortable">
  <div class="ui-state-default">Item 1</div>
  <div class="ui-state-default">Item 2</div>
  <div class="ui-state-default">Item 3</div>
  <div class="ui-state-default">Item 4</div>
  <div class="ui-state-default">Item 5</div>
</div>

<script>
  $( function() {
    $( "#sortable" ).sortable({
      revert: true
    });
  } );
 </script>

В некоторых случаях я хочу иметь возможность поместить элемент из сортируемого списка в другой.Например, когда я перетаскиваю Item 1 и перетаскиваю его прямо на Item 3, он вставляется внутри Item 3, а не становится дочерним элементом до или после него.

Я не смог ничего найти в jquery-uiдокументация, на самом деле мне нужно получить элемент, который я перетаскиваю, когда перетаскиваю другой элемент.

1 Ответ

1 голос
/ 09 июня 2019

Создано следующее из основных примеров для Sortable.В этом примере есть дочерние элементы, которые будут использоваться в качестве подсписков для каждого элемента списка. 

$(function() {
  function resize(t, c) {
    var h = (c * 18) + 9;
    var p = (c * 1.2) + 0.6;
    t.css("height", "calc(" + h + "px + " + p + "em)");
  }
  $("#sortable").sortable({
    connectWith: ".child-list",
    handle: ".ui-icon-arrowthick-2-n-s",
    items: "> div.ui-state-default"
  });
  $("#sortable").disableSelection();
  $(".child-list").sortable({
    connectWith: ".parent-list",
    receive: function(e, ui) {
      var numItems = $(".ui-state-default", this).length;
      resize($(this).closest(".ui-state-default"), numItems);
    },
    remove: function(e, ui) {
      var numItems = $(".ui-state-default", this).length;
      resize($(this).closest(".ui-state-default"), numItems);
    }
  });
});
#sortable {
  margin: 0;
  padding: 0;
  width: 340px;
}

#sortable>div {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

#sortable>div>span {
  position: absolute;
  margin-left: -1.3em;
}

#sortable .child-list {
  display: block;
  width: calc(340px - 2em);
  min-height: 1em;
}

#sortable .child-list>div {
  background: #999;
  font-size: 0.8em;
}

.ui-state-highlight {
  height: 1.5em;
  line-height: 1.2em;
}
<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="sortable" class="parent-list">
  <div class="ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Item 1
    <div class="child-list">
    </div>
  </div>
  <div class="ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Item 2
    <div class="child-list">
    </div>
  </div>
  <div class="ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Item 3
    <div class="child-list">
    </div>
  </div>
  <div class="ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Item 4
    <div class="child-list">
    </div>
  </div>
  <div class="ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Item 5
    <div class="child-list">
    </div>
  </div>
</div>

Используя обратные вызовы receive и remove для сортируемого по дочернему элементу, элемент списка можно изменить, чтобы принять элемент.Это может быть не лучший пример, так как заполнитель для подсписка действительно не отображается должным образом.Вы можете улучшить его, если оно соответствует вашим потребностям.

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

...