Question

我想让用户能够拖动他们在屏幕上输入的每个角色。

我不太确定如何访问用户输入的单个字符。

在下面的例子中，我可以操纵“地标”的每个字符。我如何为用户输入文本执行此操作？

HTML

<!doctype html>
<html>
  <head>
      <title>My project</title>
      <link rel="stylesheet" type="text/css" href="stylesheet.css">
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
      <script type="text/javascript" src="script.js"></script>
  </head>

  <body>
    <div class="character">P</div>
    <div class="character">l</div>
    <div class="character">a</div>
    <div class="character">c</div>
    <div class="character">e</div>
    <div class="character">m</div>
    <div class="character">a</div>
    <div class="character">r</div>
    <div class="character">k</div>

    <br><br>

    <form action="demo_form">
      Word: <input type="text" name="fname"><br>
    </form>
    </body>
</html>

CSS

.character {
  width: 10px; height: 15px;
  font-size: 50px;
  display: inline;
}

Jquery的

$( init );

function init() {
  $('.character').draggable();
}

Answer 1

你不能真正做到这一点，输入并不能让你分别对待每个角色（除非你通过jQuery使用.keypress()触发器）。

我建议使用<button>，每次都会创建一个可拖动的元素：<div class="character">。

OR

下面的示例显示了如何获取您键入的最后一个字符并将其转换为可拖动元素：

$('input[type="text"]').keypress(function() {
    var lastCharacter = $(this).val().slice(-1);
    $('body').append('<div class="draggable">'+lastCharacter +'</div>');
    //make element draggable
    $('.draggable').draggable();
});

Answer 2

如果我理解正确，这将有效。只需在框中键入内容，然后单击按钮进行测试

基本上，我们这样做的方式是：

获取用户输入并将其溢出为字符数组
以这样的方式加入数组：它将每个字符包装在一个元素中（span div ... whatever）
将这些元素添加到DOM
在添加的元素上调用.draggable()

function initDragable($elements) {
  $elements.draggable();
}
initDragable($('.character'));

$(function(){
    $('#make-word').click(function() {
      var $this = $(this);
      var letters = $('#my-word').val().split('');
      letters = '<div class="character">'+letters.join('</div><div class="character">')+'</div>';
      initDragable($('#word-container').html(letters).find('.character'));
    });
});

.character {
  width: 10px;
  height: 15px;
  font-size: 50px;
  display: inline;
  cursor: drag;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<div id="word-container">
  <div class="character">P</div>
  <div class="character">l</div>
  <div class="character">a</div>
  <div class="character">c</div>
  <div class="character">e</div>
  <div class="character">m</div>
  <div class="character">a</div>
  <div class="character">r</div>
  <div class="character">k</div>
</div>
<br>
<br>

<form action="demo_form">
  Word:
  <input type="text" id="my-word" name="fname">
  <br>
  <button type="button" id="make-word">Make word</button>
</form>

如何将用户输入的文本拆分为单个字符？

2 个答案: