0

I have 5 by 5 grid filled with letters. I was able to write the jQuery that allows me to make each individual tile selectable and it highlights when I select it. I'm also trying to make the tile draggable. I googled and and found that jQuery allows statement chaining if I used the format 

$(selector).fn1().fn2();

However, I can't seem to get the statement chaining to work for me. Here's the jQuery I used followed by the entire HTML. My The tiles still select and highlight, but I can't get the tiles to drag individually. Can someone tell me what I did wrong?

*the code i used : $("#squares").selectable().draggable();

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Name</title>
</head>

  <link rel = "stylesheet" type="text/css" href="board.css">
  <link href="scripts/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.js"></script>

  <script type="text/javascript">
  $(function() {
      $("#squares").selectable().draggable();
      });

  </script>

<body>

<ol id="squares">
    <li class="square-default">A</li>
  <li class="square-default">D</li>
  <li class="square-default">K</li>
  <li class="square-default">Y</li>
  <li class="square-default">I</li>
  <li class="square-default">T</li>
  <li class="square-default">A</li>
  <li class="square-default">S</li>
  <li class="square-default">E</li>
  <li class="square-default">C</li>
  <li class="square-default">R</li>
  <li class="square-default">B</li>
  <li class="square-default">A</li>
  <li class="square-default">S</li>
  <li class="square-default">T</li>
  <li class="square-default">Y</li>
  <li class="square-default">L</li>
  <li class="square-default">P</li>
  <li class="square-default">B</li>
  <li class="square-default">C</li>

</body>
</html>
jonjon
  • 121
  • 2
  • 10

0 Answers0