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

Question

我正在为我的办公室内联网创建一个简单的拼字游戏。

游戏应该也能在小屏幕上运行。在小屏幕上，我编写了 css，以便字母 block 小得多，因此它们适合。但是，我想实现一种我在 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>

_{P.S: text-align 等一些属性是继承的，除非你想改变值，否则你不必在 child 中重新声明它}