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

问：

我需要用计时器制作一个益智游戏。因此，它应该从开始按钮开始，或者将我的一个元素拖到第二个块（使用可排序）开始。

我有一个名为“timer”的工作时间函数。和 intervalID 用于设置间隔并清除它。积木是“拼件容器”和“拼图容器”。

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

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

jquery jquery-ui 倒计时

欢迎使用 Stack Overflow。请提供一个最小的可重复示例。根据您的示例，您将希望在可排序或事件上触发计时器的开始。我建议您在更全局的空间中定义一个变量，例如“timerRunning”，然后将其翻转到启动计时器时。这样，当对更多部分进行排序时，您就不会重新启动计时器。startstoptrue

答：

1赞 Twisty 11/15/2023 #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);
        isRunning = false;
      }
    }
  }).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 的 or 事件中触发计时器的开始。此演示在事件上执行启动：startstopstop

排序停止时触发此事件。

我假设一旦一个列表为空（没有更多的子元素），计时器就应该停止。放置签入允许用户拖动一块并将其放回原处，而不会欺骗计时器。stop

上一个：kivy - GridLayout 中的第一行为空，最后一行是隐藏的，ScrollView

下一个：从加载的 JQueryUI 选项卡设置页面标题 <title> [closed]

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

How to make timer on sortable in jQuery UI

评论