可在移动设备上进行手指友好排序

Question

我正在为我的办公室 Intranet 创建一个简单的单词拼字游戏。

游戏也应该在小屏幕上运行。在小屏幕上，我编写了 css 以使字母块更小，以便它们适合。但是，我想实现我在说 Scrabble 或 Words With Friends 上看到的效果，在触摸可排序项目时，它的大小会增长（而非活动项目保持相同大小）。我认为这将有助于小屏幕上的玩家更好地看到字母，因为它们必须很小。

我正在使用 active 的伪类来完成此操作，但它仍然不完美。

问题出在项目的焦点上，我认为向下移动是为了为更大的活动项目腾出空间。我宁愿它只是覆盖其他人。

这里有一些 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

提前谢谢你！

Answer 1

避免跳跃的一种选择是使用outline 来增加大小而不是更改实际大小：

$(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>

---

另一种选择是使用transform 属性来缩放元素（浏览器支持较少）：

$(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>

_{PS：像text-align这样的一些属性是继承的，除非你想改变值，否则你不必在孩子中重新声明它}