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

Question

我得到了一个任务，我需要使用 jQuery UI（拖放）从列表中向输入字段添加值。

我已经设法应用拖放功能，但是当涉及到“将值粘合”到输入字段时，对我来说似乎是一个很大的挑战。

所以，这里有一些从数据库生成的随机列表。

  <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

感谢您的时间和帮助:)

更新

在 Twisty 同事的大力帮助下，他确实设法将值从列表删除到输入字段。唯一的问题仍然是如何从列表中附加值（或者更准确地说是从徽章中）。 现在，我只能插入一个值，因为每删除一个值，我都会删除以前的值，而不是附加新值。所以，我的问题是：是否可以从输入字段中删除的值中附加值？

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

这不是所有必要的，所以我会让你弄清楚需要什么。