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

debugcn 发表于 Dev

小猪

我被困在将可放置的值附加到输入字段中。我一次只能添加一个值，并且对于每个丢弃的项目，我都用一个新值擦除以前的值，我想知道是否可以附加丢弃的值而不是用新值擦除。

这是我正在使用的代码

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

    }
  });
});

这是小提琴

卡达斯

我想首先标记重复，但考虑到您的问题的简单性，我发现的所有内容可能有点令人困惑，因为它需要从答案中提取相关部分（在某些情况下甚至不被接受），这些部分没有直接关系到您的特定用例。

首先，您使用的是文本输入，这意味着附加您的结果将最终成为一个连接。使用此系统，您的最终值将是一个包含删除字母的字符串。（在解析结果时要记住）。

基本方法是连接现有值并将其返回给您的输入，如下所示：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。