如何在jQuery UI中创建可排序的计时器

x8diyxa7  于 12个月前  发布在  jQuery
关注(0)|答案(1)|浏览(106)

我需要做一个益智游戏与计时器。所以它应该开始与开始按钮或拖动我的元素之一,第二块(与排序)。
我有一个工作时间函数,叫做“timer”。intervalID用于设置和清除间隔。块是“piece-container”和“puzzle-container”。
我尝试了这段代码,但它不能正常工作,它只是从加载页面开始。我应该如何修复它?

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

字符串

7bsow1i6

7bsow1i61#

看看下面的demo。

$(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的startstop事件中触发计时器的启动。此演示在stop事件上执行启动:
当排序停止时触发此事件。
我假设一旦一个列表为空(没有更多的子元素),计时器应该停止。在stop中放置检查允许用户拖动一个片段并将其放回,而不是欺骗计时器。

相关问题