如何用jQuery UI拖拽列表徽章值至输入框并追加内容？

嘿，我懂你现在的困扰——每次把列表项拖到输入框，新值直接覆盖掉原来的内容，没法实现追加效果对吧？咱们来改改代码就能搞定这个问题~

问题根源 #

你当前的drop事件处理逻辑里，直接用$(this).val(badge)把输入框的值替换成了新拖拽的badge文本，这自然会覆盖掉之前的内容。要实现追加，咱们得先拿到输入框现有的值，再把新值拼接进去。

修改后的完整脚本 #

把drop函数里的逻辑调整一下，就能实现追加效果了，还可以加个分隔符让内容更清晰：

$(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();
      // 获取输入框当前值，拼接新内容
      var currentVal = $(this).val();
      // 如果已有内容就加逗号分隔，空的话直接赋值
      var newVal = currentVal ? `${currentVal}, ${badge}` : badge;
      $(this).val(newVal);
    }
  });
});

可选优化：避免重复添加 #

要是不想同一个值被重复拖进去，还可以加个判断逻辑：

drop: function(e, ui) {
  var badge = ui.draggable.find(".badge").text();
  var currentVal = $(this).val();
  // 检查值是否已存在，不存在才追加
  if (!currentVal.includes(badge)) {
    var newVal = currentVal ? `${currentVal}, ${badge}` : badge;
    $(this).val(newVal);
  }
}

这样调整后，每次拖拽新的列表项，值就会追加到输入框里，不会再覆盖原有内容啦~

内容的提问来源于stack exchange，提问作者Svinjica