Christine Christine - 5 months ago 20
Javascript Question

Jquery UI draggable start function code

Can someone explain me this start: function code?

$("#car, #boat, #soccer").draggable({
start: function(event, ui) {
if (!done)
return false;
},

Answer

done is a defined variable (mostly boolean), if it equals to true (and not false), then the user can drag #car, #boat, and #soccer. This can explain it

$(function(){
  
  var done = false;
  $('#tg-done').on('click', function(){
      ((done) ? done = false : done = true);
      $('p').text('`done` = ' + done);
  });
  
  $(".draggable" ).draggable({
      start: function(event, ui) {
         if(!done) return false;
      }
  });

});
.draggable {
    width:100px;
    height:100px;
    background:#333;
    border-radius:4px;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<button id="tg-done">Toggle `done`</button>
<p>`done` = false</p>


<div class="draggable"></div>