JQuery drop div внутри сортируемого списка

Question

Я пытаюсь создать простой сортируемый и перетаскиваемый список, состоящий из:

• списка перетаскиваемых элементов (связанных с сортируемыми ниже)
• сортируемых списков элементов
  • Некоторые из этих предметов будут иметь выпадающий div внутри них

Мне удалось сделать это до сих пор: JSFiddle

HTML Код:

<h3>DRAGGABLE</h3>
<ul id="draggables">
  <li class="draggable">Item 1</li>
  <li class="draggable">Item 2</li>
  <li class="draggable">Item 3</li>
  <li class="draggable">Item 4</li>
  <li class="draggable">Item 5</li>
</ul>

<h3>SORTABLE</h3>
<ul id="itemsContainer">
  <li class="item">Item 1</li>
  <li class="item">
    <p>Item with drop zone</p>
    <div class="droppable">DROP HERE</div>
  </li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
</ul>

Код JS находится здесь:

$(".draggable").draggable({
  connectToSortable: '#itemsContainer',
  helper: 'clone',
  revert: 'invalid'
});

$("#itemsContainer").sortable({
  revert: true
});

$(".droppable").droppable({
  drop: function(event, ui) {
    $(this).html("Dropped!");
    $(this).css("background-color", "red");
    $(ui.helper[0]).css("background-color", "green");
  }
});

Проблема в том, что, когда элемент сбрасывается внутри элемента Droppable Div, он правильно обнаруживает, что происходит сброс, но элемент все равно добавляется в сортируемый список. Я думал, что «жадный» вариант предотвратит это. Есть идеи?

РЕДАКТИРОВАТЬ: Если я применяю стилизацию к объекту ui.helper [0] (он же клонированный перетаскиваемый объект), он остается включенным до тех пор, пока элемент не будет отсортирован в списке для сортировки.

Answer 1

Возможно, это немного излишне, но это то, что я мог бы придумать.

Когда мы stop перетаскиваем перетаскиваемый объект, нам нужно посмотреть, находится ли объект над областью выпадения, если поэтому добавьте его в указанную область.

Редактировать: Теперь мы можем перетаскивать сортируемый элемент из того же списка в зону перетаскивания, подключая сортируемый список к зоне перетаскивания и принимая сортируемые элементы. .

jsFiddle

var over = false; // is the item over a droppable area?
var el_over = null; // if over a drop area, what drop area?
var de = null; // the item to detach

$(".draggable-item").draggable({
  connectToSortable: ".list-2",
  stop: function(event, ui) {
    if (over) {
      de = $(this).detach();
      el_over.append(de);
    }
    over = false;
    el_over = null;
  }
});

$(".list-2").sortable({
  connectWith: '.drop-zone, .list-2',
  cursor: "move",
  stop: function(event, ui) {
    if (over) {
      de = ui.item.detach();
      el_over.append(de);
    }
    over = false;
    el_over = null;
  }
});

$(".drop-zone").droppable({
  accept: ".draggable-item, .sortable-item",
  over: function(event, ui) {
    //console.log("over");
    over = true;
    el_over = $(this);
  },
  out: function(event, ui) {
    //console.log("out");
    over = false;
    el_over = null;
  }
});

ul {
  padding: 10px;
  list-style-type: none;
  width: 200px;
}

li {
  text-align: center;
  padding: 5px 10px;
  margin: 5px;
}

.draggable-item {
  background: #9bcdf0;
}

.sortable-item {
  background: #6c2020;
}

.drop-zone {
  min-height: 30px;
  background: #fff;
  padding: 1px 0;
}

.drop-zone .draggable-item {
  width: auto !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul class="list-1">
  <li class="draggable-item">draggable 1</li>
  <li class="draggable-item">draggable 2</li>
  <li class="draggable-item">draggable 3</li>
  <li class="draggable-item">draggable 4</li>
  <li class="draggable-item">draggable 5</li>
</ul>

<ul class="list-2">
  <li class="sortable-item">sortable 1</li>
  <li class="sortable-item">sortable 2</li>
  <li class="sortable-item">sortable 3
    <div class="drop-zone"></div>
  </li>
  <li class="sortable-item">sortable 4</li>
  <li class="sortable-item">sortable 5</li>
</ul>

Обновленный ответ: Оказывается, нам не нужен весь этот перебор XD. Если мы просто инициализируем .drop-zone как сортируемое и подключаем его к себе и list-2, мы получаем тот же результат.

Вот обновленная скрипка .

$(".draggable-item").draggable({
    connectToSortable: ".list-2",
});

$(".list-2").sortable({
    connectWith: '.drop-zone, .list-2',
    cursor: "move",
});

$(".drop-zone").droppable({
    accept: ".draggable-item, .sortable-item",
});

$(".drop-zone").sortable({
    connectWith: '.drop-zone, .list-2',
  items: '.draggable-item, .sortable-item',
});