jquery перетащить элементы из сортируемого списка в другой только для назначения (не перемещать) - PullRequest
Новая
       22

jquery перетащить элементы из сортируемого списка в другой только для назначения (не перемещать)

0 голосов
/ 27 февраля 2019

У нас есть 2 сортируемых списка (необходимо сортировать), и я хочу иметь возможность перетаскивать элементы из списка 1 поверх элементов из списка 2, не перемещая элементы из списка 2 или списка 1, и когда я удаляю элемент, он будет идтивернуться к списку 1 (в той же позиции) и иметь внутри него имя элемента из списка 2.

Это похоже на процесс присвоения тегов.Мы должны иметь возможность назначать один и тот же элемент нескольким элементам из другого списка и иметь возможность пометить элементы из списка 2 в список 1 также.

Я не уверен, нужно ли использовать перетаскиваемые или сбрасываемые сценариииз jqueryUI и как.Любые идеи, как я могу это сделать?

Спасибо! 

var sortableOptions = {
  cursor: "move",
  placeholder: "sortable-placeholder",
  tolerance: "pointer",
  opacity: 0.8,
  scroll: true,
  scrollSensitivity: 100,
}
$('.list1').sortable(sortableOptions);
$('.list2').sortable(sortableOptions);
.list1,
.list2 {
  list-style-type: none;
  width: 40%;
  float: left;
  margin-right: 30px;
}

.list1 .item,
.list2 .item {
  border: 1px solid gray;
  padding: 10px;
}

.sortable-placeholder {
  border: 1px dotted #e6e6e6;
  height: 40px;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<ul class="list1">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

<ul class="list2">
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
  <li class="item">Item 6</li>
</ul>

1 Ответ

0 голосов
/ 27 февраля 2019

Хорошо, во-первых, если вы читаете сортируемые документы jQuery, вы знаете, что сортируемые объекты приобретают свойства перетаскиваемых объектов.

Таким образом, когда вы инициализируете сортируемые объекты, вы можете установить определенные свойства для обработкисортируемые события («начало», «остановка», «получение» и т. д.) 

var sortableOptions = {
  cursor: "move",
  placeholder: "sortable-placeholder",
  tolerance: "pointer",
  opacity: 0.8,
  scroll: true,
  connectWith: '.list1',
  helper: function(e, li) {
    copyHelper = li.clone().insertAfter(li);
    return li.clone();
  },
  stop: function() {
    copyHelper && copyHelper.remove();
  },
  receive: function(e, ui) {
    let string='<small>'+ui.item[0].innerHTML+"</small>"
    ui.item.prev().html(ui.item.prev().html()+string);
    ui.item.remove()
    copyHelper=null;
  },
  scrollSensitivity: 100,
}

Обратите внимание на параметр connectWith - он гарантирует, что ваши списки подключены.Я подготовил скрипку, которая должна воспроизводить ожидаемое поведение:

JSFiddle .

Предупреждение: Текущий код не проверяет дубликаты,поэтому, если вы передадите item1 из list1 в list2 и вернетесь снова, элемент list1 будет дубликатом в list1!

EDIT

Я изменил скрипкуи фрагмент кода, чтобы отразить то, что вы просили, Здесь

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

EDIT2

Хорошо, теперь вы попросили что-то, что заставило меня почесать голову: P

Итак, мое решение для вас:

Измените CSS на: 

.list1,
.list2 {
  list-style-type: none;
  width: 40%;
  float: left;
  margin-right: 30px;
}

.list1 .item,
.list2 .item {
  float: left; //THIS ONE IS THE IMPORTANT ONE
  border: 1px solid gray;
  padding: 10px;
}

.sortable-placeholder {
  border: 1px dotted #e6e6e6;
  height: 40px;
  color: #fff;
}

Это сделает ваши списки горизонтальными (делая очень очевидным, к какому элементу выдобавляемся).

Однако, если вы хотите перейти к вертикальному списку, мой совет - прекратить использование прокрутки, если только вам это не нужно.Из моего исследования, прокручиваемый всегда будет «пробел» для нового элемента, поэтому либо вы:

  • Изменить библиотеку jquery (IMO, кажется, плохая идея),
  • Вы добавляетеновые прослушиватели событий (mouseup / mousedown / mousemove) для каждого элемента списка.
  • Или вы отказываетесь от прокручиваемого и «жёсткого» кода нужного вам поведения.

JSFiddle

...