Question

我得到了一个任务，我需要使用jQuery UI从列表中添加值到输入字段（拖放）。

我设法应用了拖放功能，但是当涉及到＆＃34;粘合价值＆＃34;为我输入字段似乎是一个很大的挑战。

所以，这是从数据库生成的一些随机列表。

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

现在有百万美元的问题？是否可以将span值粘贴到输入字段并将其发送到服务器？

这是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

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

0 个答案: