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

Posted 2023-05-08

【中文标题】是否可以将列表中的值添加到输入表单字段？

【英文标题】：Is it possible to add values from list to input form field?

【发布时间】：2018-10-21 12:54:00

【问题描述】：

我得到了一个任务，我需要使用 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

【问题讨论】：

有很多问题。首先，让我们从 ID 开始，它们对于每个元素必须是唯一的。您不能有 2 个droppable id。其次，你没有绑定到drop 回调，它会将数据输入到字段中。

感谢您的反馈，非常感谢。关于第二个问题，你能指出我正确的方向吗

api.jqueryui.com/droppable/#event-drop

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

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

【讨论】：

感谢您的努力。我只是想知道两件事。是否可以添加值而不覆盖它，其次是保留可拖动元素而不是删除它。除此之外，一切都是完美的，它会被接受

@Svinjica 是的，这些都是可以做到的。您想要捕获该字段的当前值并将其附加到它而不是替换它。是的，您可以在拖放结束时恢复拖动项目的位置。