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

Posted 2023-05-08

【中文标题】如何使用拖放将值附加到输入表单字段中

【英文标题】：How to append values using drag and drop into input form field

【发布时间】：2018-10-21 20:47:32

【问题描述】：

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

这是我正在使用的代码

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

【参考方案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);

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

【讨论】：

谢谢，非常感谢。公平地说，我仍在学习过程中，因为我正在尝试转换职业（从空间规划到 IT 部门），并且在这里和那里我可能会问一些愚蠢的问题，但每次开始都很艰难:) 再次感谢你，我会测试尽快编码