代码之家 › 专栏 › 技术社区 › ovicko

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

jquery-ui html css jquery javascript

-7

ovicko · 技术社区 · 7 年前

我试过了 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>

1 回复 | 直到 7 年前

Twisty 7 年前

在这里进行一些猜测。以下是我总结的内容:

信件一旦被使用,就不能重复使用
用户只能清除整个字段(所有信件均无顺序返回)

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

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

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