我想使用 jQuery 创建一个可拖动的字母，用户可以将其拖放到 html 输入元素中

Question

我尝试了this的建议，但字母无法拖动。

请查看此图片以获得所需的效果。

<div class="word">
 <div>s</div>
 <div>t</div>
 <div>a</div>
 <div>c</div>
 <div>k</div>
 <div>o</div>
 <div>v</div>
 <div>e</div>
 <div>r</div>
 <div>f</div>
 <div>l</div>
 <div>o</div>
 <div>w</div>
</div>

<script type="text/javascript">
 $(function () {
  $(".word").draggable();
 });
</script>

需要的效果

Answer 1

在这里进行一些猜测。以下是我整理的：

1. 每个字母都应该是可拖动的
2. 字母一旦被使用，就不能再使用了
3. 输入字段不应允许用户键入，而只能将一个字母拖入该字段
4. 用户只能清除整个字段（所有字母无序返回）

HTML

<div class="word">
  <div class="letter">s</div>
  <div class="letter">t</div>
  <div class="letter">a</div>
  <div class="letter">c</div>
  <div class="letter">k</div>
  <div class="letter">o</div>
  <div class="letter">v</div>
  <div class="letter">e</div>
  <div class="letter">r</div>
  <div class="letter">f</div>
  <div class="letter">l</div>
  <div class="letter">o</div>
  <div class="letter">w</div>
</div>
<div class="field ui-widget">
  <div class="ui-widget-header ui-corner-top">
    Assign Rooms
  </div>
  <div class="ui-widget-content">
    <div class="field-wrapper">
      <input placeholder="Staff Name" type="text" />
      <a class="clear-button">Clear Text</a>
    </div>
    <div class="field-wrapper">
      <input placeholder="Staff Room" />
      <a class="clear-button">Clear Text</a>
    </div>
    <a class="add-button">+</a>
  </div>
  <div class="ui-widget-header ui-corner-bottom">
    Press + to addanother form field.
  </div>
</div>

CSS

.ui-widget-header {
  padding: .4em;
  font-weight: normal;
  margin: -1px 0;
}

.field-wrapper {
  display: inline-block;
  margin: 1em .25em;
  position: relative;
  z-index: 0;
}

.field-wrapper input {
  z-index: 0;
}

.field-wrapper .small-button {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  padding: 0;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 4px;
  left: 89%;
}

.word {
  padding: .2em;
}

.letter {
  display: inline-block;
  border: 0;
  border-radius: 15%;
  background: #ccf;
  width: 1.125em;
  height: 1.125em;
  text-align: center;
}

.letter.ui-dragging {
  z-index: 1000;
}

JavaScript

$(function() {
  function makeDrag($el) {
    $el.draggable({
      revert: true
    });
  }
  makeDrag($(".letter"));
  $(".add-button").button();
  $(".clear-button").button({
    classes: {
      "ui-button": "ui-corner-all small-button"
    },
    icon: "ui-icon-close",
    showLabel: false
  }).click(function(e) {
    var $me = $(this);
    var $field = $me.parent().find("input");
    var origValue = $field.val();
    var $blanks = $(".letter:not(.ui-draggable)");
    for (var i = 0; i < origValue.length; i++) {
      $blanks.eq(i).html(origValue[i]);
    }
    makeDrag($blanks);
    $field.val("");
    $me.hide();
  }).hide();
  $(".field-wrapper").droppable({
    drop: function(e, ui) {
      var letterValue = ui.helper.text().trim();
      var $field = $(this).find("input");
      $field.val($field.val() + letterValue);
      ui.helper.html("&nbsp;").draggable("destroy");
      if ($field.val().length) {
        $field.next("a").show();
      }
      return false;
    }
  });
  $(".field-wrapper input").on("click keydown", function(e) {
    e.preventDefault();
    return false;
  });
});

工作示例：https://jsfiddle.net/Twisty/kLdcj8m1/

这段代码有很多优点和缺点，但它基本上可以满足您的需求。请注意，可放置区域是包装器，而不是文本框元素本身。在我看来，这使它更容易处理。

更进一步，我可能会将其编码到一个小部件中，该小部件在隐藏的文本字段之上创建一个伪文本字段。这将允许更高程度的样式和主题。