I want to create a draggable letters using jQuery which the user can drag then drop into the html input element

Question

I have tried this suggestions, but letters are not able to be dragged.

Please see this image for desired effect.

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

The required effect

Answer 1

Taking a few guesses here. Here is what I put together:

1. Each letter should be draggable
2. Once a letter has been used, it cannot be re-used
3. The input fields should not allow the user to type, but only drag a letter in to the field
4. User can clear whole field only (all letters returned in no order)

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

Working Example: https://jsfiddle.net/Twisty/kLdcj8m1/

There are lots of pros and cons to this code, yet it can do essentially what you're looking for. Notice the droppable zone is the wrapper and not the textbox element itself. This made it just a bit easier to deal with in my opinion.

Going further, I would probably code this into a widget that creates a pseudo text field on top of a hidden text field. This would allow for a higher degree of styling and theming.