0

我正在尝试使字母可拖动以构成单词。但由于某种原因，它只是行不通。

我的 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();
});
4

3 回答 3

1

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

于 2013-01-31T13:32:32.013 回答
0

可能你要使用的是.sortable()，最好是创建单词，看看这个fiddle：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();
});
于 2013-01-31T14:00:12.817 回答
0

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

您可能的意思是$('#letters')，它会选择一个元素，<div>with an idof letters。

您可能会从一些关于jQuery 选择器的附加阅读中受益。

于 2013-01-31T13:29:25.193 回答