Question

我试图让信件可以拖延来说一句话。但由于某种原因，它将无法正常工作。

我的HTML：

    <html>
  <head>
    <title>Word Maker</title>
    <script type='text/javascript' src='script.js'></script>
     <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.16.custom.min.js" type="type/javascript"></script>
    <script src="js/ui/jquery.ui.draggable.js" type="type/javascript"></script>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="letters" class="makeDraggable">
        <div id="letter1" class="makeDraggable">
          <p>w</p>
        </div>
    <div id="letter2" class="makeDraggable">
      <p>p</p>
      </div>
    <div id="letter3" class="makeDraggable">
      <p>i</p>
    </div>
    <div id="letter4" class="makeDraggable">
      <p>r</p>
    </div>
    <div id="letter5" class="makeDraggable">
      <p>o</p>
    </div>
    <div id="letter6" class="makeDraggable">
      <p>m</p>
    </div>
    <div id="letter7" class="makeDraggable">
      <p>l</p>
    </div>
    <div id="letter8" class="makeDraggable">
      <p>l</p>
    </div>
    <div id="letter9" class="makeDraggable">
      <p>w</p>
    </div>
    <div id="letter10" class="makeDraggable">
      <p>y</p>
    </div>
    <div id="letter11" class="makeDraggable">
      <p>u</p>
    </div>
    <div id="letter12" class="makeDraggable">
      <p>o</p>
    </div>
    <div id="letter13" class="makeDraggable">
      <p>g</p>
    </div>
    <div id="letter14" class="makeDraggable">
      <p>t</p>
    </div>
    <div id="letter15" class="makeDraggable">
      <p>o</p>
    </div>
    <div id="letter16" class="makeDraggable">
      <p>o</p>
    </div>
  <div id="letter17" class="makeDraggable">
    <p>i</p>
    </div>
    <div id="letter18" class="makeDraggable">
      <p>t</p>
    </div>
    <div id="letter19" class="makeDraggable">
      <p>h</p>
    </div>
    <div id="letter20" class="makeDraggable">
      <p>e</p>
    </div>
    <div id="letter21" class="makeDraggable">
      <p>m</p>
    </div>
  </div>
  </body>
</html>

JS代码：

$(function() {
    $("letters").draggable();
});

Answer 1

您应该尝试将.draggable()应用于课程makeDraggable的所有元素。看看this example。只需更改您的jquery选择器，您就可以使单个字母可拖动。

Answer 2

您遇到的第一个问题是$('letters')。该选择器告诉jQuery查找由<letter>标记创建的所有元素，这些元素都是无。

您可能需要$('#letters')代替<div>选择一个元素，id letters {{1}}。

您可能会从有关jQuery selectors的其他阅读中受益。

Answer 3

你想要使用的是.sortable（），最好是创建单词，看看这个小提琴：http://jsfiddle.net/CqqxE/

你在js所要做的就是：

$(function () {
    $("#letters").sortable();
});

然后你可以添加一些花哨的CSS以使事情变得更酷

.makeDraggable {
    width: 20px;
    height: 20px;
    background-color: #CDE;
    float: left; /* Important to align letters */
    text-align: center;
    cursor: pointer;
}
.makeDraggable:active {
    background-color: #DCC;
    width: 24px;
    height: 24px;
}

编辑＃1：

当然，现在你不需要所有这些课...... http://jsfiddle.net/promatik/CqqxE/1/

创建单词：

<div class="word">
    <div>w</div>
    <div>o</div>
    <div>r</div>
    <div>d</div>
</div>
<div class="word">
    <div>a</div>
    <div>n</div>
    <div>o</div>
    <div>t</div>
    <div>h</div>
    <div>e</div>
    <div>r</div>
</div>

和JS：

$(function () {
    $(".word").sortable();
});

试图让字母可拖动来制作一个单词

3 个答案:

编辑＃1：