Как добавить значения с помощью перетаскивания в поле ввода

Question

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

Вот код, который я использую

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

    }
  });
});

А вот и скрипка

Answer 1

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

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

Основной способ - объединить существующее значение и вернуть его в ваш ввод, например:

$(this).val($(this).val() + badge);

Однако,в зависимости от вашего случая вы, вероятно, захотите выполнить действия с вашим результатом, прежде чем возвращать его на вход.Мы все еще работаем над строкой, например:

//if you want to verify that the dragged item (letter) exits only once:
if($(this).val().indexOf(badge) < 0){
    $(this).val($(this).val() + badge);
}

ПРИМЕЧАНИЕ. Как некоторые могут догадаться, на мое отношение влияют последние сообщения о приветствии и поиске в Google.Если вы чувствуете, что я не должен был отвечать, не стесняйтесь комментировать.