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 セレクターを変更するだけで、1 文字をドラッグ可能にすることができます。

于 2013-01-31T13:32:32.013 に答える
0

おそらく使用したいのは .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();
});
于 2013-01-31T14:00:12.817 に答える