Finger friendly sortable on mobile device

Question

I am creating a simple word jumble game for my office intranet.

The game should also work on small screens. On small screens I have written css so that the letter blocks are much smaller so they will fit. However, I'd like to implement an effect I have seen on say Scrabble or Words With Friends, where on touch of the sortable item, it grows in size (while the non active items remain the same size). I think it will help the player on a small screen see the letters a bit better since they have to be small.

I am using the pseudo class of active to accomplish this but it is still not perfect.

The problem is on focus of the item, the shifts down I think to make room for the larger active item. I'd rather it just cover the others.

Here's some html:

<div id="container">

<div class="letters">
<ul id="sortable">
<li>L</li>
<li>A</li>
<li>T</li>
<li>R</li>
<li>C</li>
<li>I</li>
<li>I</li>   
<li>C</li>
</ul>
</div>


<div class="letters">
<ul id="sortable-2">
<li>K</li>
<li>N</li>
<li>H</li>
<li>T</li>
<li>G</li>
<li>I</li>  
</ul>

</div>
</div>

Here's my fiddle

Thank you in advance!

Answer 1

One option to avoid the jumping would be to use an outline to increase the size rather than changing the actual size:

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

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
#container {
  width: 1000px;
  margin: 0px auto;
  padding: 20px;
  text-align: center;
  background-color: #f0f0f0;
}
div.letters {
  margin: 0px auto 10px auto;
}
ul.sortable {
  width: 100%;
  height: 80px;
  padding: 0;
  margin: 0px auto;
  list-style: none;
}
.sortable li {
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  margin: 3px;
  font-size: 36px;
  vertical-align: middle;
  color: #fff;
  background-color: #333;
}
.sortable li:active {
  /*here*/
  outline: 10px solid #333;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div id="container">

  <h2> MIG Signature Elements Scramble Game</h2>

  <p>Drag the letter tiles around to spell out one of MIG’s Signature Elements (if you don’t know what those are, check your handbook!).</p>
  <p>Click on the “Hint” button for a clue to the answer. After you’ve figured it out, hit “Submit” and you can be eligible for a special prize*.</p>
  <div class="letters">
    <ul id="sortable" class="sortable">
      <li>L</li>
      <li>A</li>
      <li>T</li>
      <li>R</li>
      <li>C</li>
      <li>I</li>
      <li>I</li>
      <li>C</li>
    </ul>
  </div>
  <div class="letters">
    <ul id="sortable-2" class="sortable">
      <li>K</li>
      <li>N</li>
      <li>H</li>
      <li>T</li>
      <li>G</li>
      <li>I</li>
    </ul>
  </div>
  <div style="clear:both;"></div>
  <button type="button" class="btn btn-primary btn-lg">Submit</button>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Hint</button>
  <p>*Prizes will be awarded for each scramble by raffle of players with correct answers. Keep checking back every few days for a new scramble!</p>
</div>

---

Another option would be to scale the element using transform property (less browser upport):

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

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
#container {
  width: 1000px;
  margin: 0px auto;
  padding: 20px;
  text-align: center;
  background-color: #f0f0f0;
}
div.letters {
  margin: 0px auto 10px auto;
}
ul.sortable {
  width: 100%;
  height: 80px;
  padding: 0;
  margin: 0px auto;
  list-style: none;
}
.sortable li {
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  margin: 3px;
  font-size: 36px;
  vertical-align: middle;
  color: #fff;
  background-color: #333;
}
.sortable li:active {
  /*here*/
  transform: scale(1.5);
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div id="container">

  <h2> MIG Signature Elements Scramble Game</h2>

  <p>Drag the letter tiles around to spell out one of MIG’s Signature Elements (if you don’t know what those are, check your handbook!).</p>
  <p>Click on the “Hint” button for a clue to the answer. After you’ve figured it out, hit “Submit” and you can be eligible for a special prize*.</p>
  <div class="letters">
    <ul id="sortable" class="sortable">
      <li>L</li>
      <li>A</li>
      <li>T</li>
      <li>R</li>
      <li>C</li>
      <li>I</li>
      <li>I</li>
      <li>C</li>
    </ul>
  </div>
  <div class="letters">
    <ul id="sortable-2" class="sortable">
      <li>K</li>
      <li>N</li>
      <li>H</li>
      <li>T</li>
      <li>G</li>
      <li>I</li>
    </ul>
  </div>
  <div style="clear:both;"></div>
  <button type="button" class="btn btn-primary btn-lg">Submit</button>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Hint</button>
  <p>*Prizes will be awarded for each scramble by raffle of players with correct answers. Keep checking back every few days for a new scramble!</p>
</div>

_{P.S: Some properties like text-align are inherited, you don't have to re-declare it in a child unless you want to change the value}