如何使用拖放将值附加到输入表单字段中

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

    }
  });
});

这里是fiddle

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

注意：正如一些人可能猜到的，我的态度受到最近关于欢迎和谷歌搜索的帖子的影响。如果您觉得我不应该回答，请随时发表评论。