How to make timer on sortable in jQuery UI

Question

I need to make a puzzle game with timer. So it should start with start button or with dragging one of my elements to the second block (made with sortable).

I have a working time function called 'timer'. And intervalID for setting interval and clearing it. Blocks are 'piece-container' and 'puzzle-container'.

I tried this code but it doesn't work properly, it just starts with loading the page. How should I fix it?

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

Answer 1

Consider the following 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>

As I suggested in my comment, you can trigger the start of your timer in the start or stop events of Sortable. This demo performs the start on the stop event:

This event is triggered when sorting has stopped.

I am assuming that once one list is empty (no more children elements), the timer should stop. Placing the check in stop allows the user to drag a piece and put it back, and not trick the timer.