Можно ли добавить значения из списка в поле ввода?

Question

Я получил назначение, в котором мне нужно добавить значения в поле ввода из списка с помощью пользовательского интерфейса jQuery (перетаскивание).

Мне удалось применить функцию перетаскивания, но когда дело доходит до «склеивания значений» в поле вводадля меня это кажется довольно сложной задачей.

Итак, вот некоторый случайный список, сгенерированный из базы данных.

  <ul class="list-group">
    <li class="ui-widget list-group-item d-flex justify-content-between align-items-center">
      Another Value
      <span class="badge badge-primary badge-pill">A Value</span>
    </li>
    <li class="ui-widget list-group-item d-flex justify-content-between align-items-center">
      Epic Value
      <span class="ui-widget-content badge badge-primary badge-pill">E</span>
    </li>
    <li class="ui-widget list-group-item d-flex justify-content-between align-items-center">
      Some Value
      <span class="ui-widget-content badge badge-primary badge-pill">V</span>
    </li>
  </ul>

Вот сценарий

$(function() {
  $(".ui-widget").draggable({
    revert: function(event, ui) {

      $(this).data("ui-draggable").originalPosition = {
        top: 0,
        left: 0
      };

      return !event;

    }
  });
  $("#droppable").droppable();
})

А теперь вопрос на миллион долларов?Можно ли приклеить значение диапазона к полю ввода и отправить его на сервер?

Вот jsFiddle

Спасибо за ваше время и помощь:)

ОБНОВЛЕНИЕ

С огромной помощью товарища Твисти ему удалось сбросить значение из списка в поле ввода.Остается только вопрос, как добавить значения из списка (или, точнее, из значка).Теперь я могу вставить только одно значение, потому что с каждым удаленным значением я стираю предыдущее, а не добавляю новое.Итак, мой вопрос заключается в следующем: возможно ли добавить значения из пропущенных значений в поле ввода?

$(function() {
  $(".ui-widget").draggable({
    helper: 'clone'
  });
  $(".drop").droppable({
    accept: ".list-group-item",
    classes: {
      "ui-droppable-hover": "drag-hover"
    },
    drop: function(e, ui) {
      var badge = ui.draggable.find(".badge").text();
      $(this).val(badge);

    }
  });
});

Обновлено Fiddle

Answer 1

Не очень ясно, каково ваше «назначение», но если вы хотите перетащить объект в текстовое поле и заполнить его, это будет сделано в drop событии.

Смотрите больше: http://api.jqueryui.com/droppable/#event-drop

Пример: https://jsfiddle.net/Twisty/mxnt74kh/

JavaScript

$(function() {
  $(".ui-widget").draggable({
    revert: "invalid"
  });
  $(".drop").droppable({
    accept: ".list-group-item",
    classes: {
      "ui-droppable-hover": "drag-hover"
    },
    drop: function(e, ui) {
      var badge = ui.draggable.find(".badge").text();
      $(this).val(badge);
      ui.draggable.remove();
    }
  });
});

Это не все необходимо, поэтому я позволю вам выяснить, что нужно или нет.