Javascript 是否可以将列表中的值添加到输入表单字段？

我得到了一个分配，我需要使用jQueryUI（拖放）将值添加到列表中的输入字段中

我已经成功地应用了拖放功能，但对于我来说，在输入字段中“粘贴值”似乎是一个相当大的挑战

下面是从数据库中生成的一些随机列表

  <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>

现在是百万美元问题？是否可以将跨度值粘附到输入字段并将其发送到服务器

这是

感谢您的时间和帮助：）

更新

在Twisty同伴的大力帮助下，他成功地将值从列表中删除到了输入字段中。唯一的问题是如何从列表中附加值（或者更准确地说，从badge中附加值）。 现在，我只能插入一个值，因为每次删除的值都会删除以前的值，而不是追加新的值。所以，我的问题是：是否可以在输入字段中附加掉的值

$(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);

    }
  });
});

---

更新了

您的“分配”不是很清楚，但是如果您想将对象拖到文本字段并填充它，则可以在

drop

事件中完成

请参阅更多：

例如：

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();
    }
  });
});

---

这并不是所有必要的，所以我会让您找出需要什么或不需要什么。

有很多问题。首先，让我们从ID开始，每个元素的ID必须是唯一的。您不能有2个可拖放的ID。其次，您没有任何绑定到

drop

回调的内容，该回调会将数据输入字段。感谢您的反馈，我非常感谢。你能为我指出第二个问题的正确方向吗？谢谢你的努力。我只是想知道两件事。是否可以添加值而不覆盖它，其次是保留可拖动元素而不删除它。除此之外，一切都是完美的，它将是完美的accepted@Svinjica是的，这些都是可以做到的。您希望捕获字段的当前值，并将其附加到字段中，而不是替换它。是的，您可以在拖放结束时还原拖动项的位置。

$(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();
    }
  });
});