如何在 jQuery UI 中使计时器可排序

Question

我需要制作一个带有计时器的益智游戏。所以它应该从开始按钮开始或将我的元素之一拖到第二个块（用可排序制成）开始。

我有一个名为“计时器”的工作时间功能。和intervalID用于设置和清除间隔。块是“碎片容器”和“拼图容器”。

我尝试了这段代码，但它无法正常工作，它只是从加载页面开始。我该如何解决？

$('.image-box').sortable({
    connectWith: '#piece-container, #puzzle-container',
    containment: '#puzzle-container',
   
   //intervalID: setInterval(timer, 1000),       
}) 

Answer 1

考虑以下演示。

$(function() {
  var timer, s = 0,
    m = 0,
    isRunning = false;

  function startTimer() {
    timer = setInterval(function() {
      s++;
      if (s > 59) {
        s = 0;
        m++;
      }
      $("#timer").html((m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s));
    }, 1000);
  }
  
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    stop: function(e, ui) {
      if (!isRunning) {
        startTimer();
        isRunning = true;
      }
      if (isRunning && $("#sortable1").children().length == 0) {
        clearInterval(timer);
      }
    }
  }).disableSelection();
});

#sortable1,
#sortable2 {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}

#sortable1 li,
#sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

<div id="timer"></div>

正如我在评论中建议的那样，您可以在 Sortable 的

start

或

stop

事件中触发计时器的启动。此演示在

stop

事件上执行启动：

排序停止时触发此事件。

我假设一旦一个列表为空（没有更多的子元素），计时器应该停止。将支票放入

stop

允许用户拖动一块并将其放回去，而不是欺骗计时器。