Question

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

游戏也适用于小屏幕。在小屏幕上我写了css，这样字母块就小得多，所以它们很合适。但是，我想实现我在Scrabble或Words With Friends上看到的效果，在触摸可排序的项目时，它的大小会增加（而非活动项目的大小保持不变）。我认为它会帮助小屏幕上的播放器看到字母更好一点，因为它们必须很小。

我正在使用active类的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来增加尺寸而不是改变实际尺寸：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

另一个选择是使用transform属性缩放元素（ less browser upport ）：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

_{P.S：某些属性如text-align是继承的，您不必在子项中重新声明它，除非您想要更改值}

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

1 个答案: