Question

I have an image which when onmousedown is triggered, it runs a function that changes its class and makes it draggable, however the first time I drag it it wont drag, it changes the class but will not drag? After the intial failed drag, if you then drag again it will drag but why wont it drag at first?

function element_click(element_class) {
  $("#" + element_class).draggable("enable");
  $("." + element_class).addClass("element_select");
  $("#" + element_class).draggable({
    disabled: false,
    opacity: 0.9,
    revert: true,
    stop: function(event, ui) {
      $(".element_select").removeClass('element_select');
      $("#" + element_class).addClass(element_class);
      $("#" + element_class).draggable("disable");
    }
  });
}


<img id="element_air_1" style="z-index: 5;" class="element_air_1" 
 onmousedown="javascript: element_click('element_air_1')" 
src="Doodle God Elements/air.png">

Answer 1

Add this block of code to your script:

window.onload = function(){
    element_click($('#element_air_1').attr('class'));   
}

It will trigger your script before your first click.