title: JQuery cannot properly access draggable elements dropped on another element (which is draggable)
body: <p>I have problems accessing draggable elements which can be dropped on another element, which is a draggable element. What I want the code to do is to execute different instructions depending on the dropped element. For example, if I drop an element with the id "element1" on the target (which is the droppable element) certain instructions will be executed; if I drop an element with the id "element2" on the target (which is the droppable element) another set of instructions will be executed. For the example described in the last phrase, from what I know, to access element1's one parents, one may use <strong><em>$(ui.draggable).parents("#element1")</em></strong> ,to access element2's parents, one may use <strong><em>$(ui.draggable).parents("#element2")</em></strong>. By using the length property I should get the number of parents. Used in the drop event of the droppable element, these two sequences <strong><em>$(ui.draggable).parents("#element1").length</em></strong>,  <strong><em>$(ui.draggable).parents("#element2").length</em></strong> it shoul be detected which element was dropped so that the proper instructions will be executed. 
  In my application the droppable element is <strong>#up_spin_1s</strong> and the droppables are <strong>#electron_1</strong> and #electron_1. So what I want is to execute different instructions depending on the dropped element. Only the instructions from the <strong>*if($(ui.draggable).parents("#electron_1").length){*</strong> block are executed, no matter what element is dropped.</p>
  
  <p>Bellow is the discussed code:</p>
  
  <pre><code>$("#up_spin_1s").droppable({
      accept: "#electron_1, #electron_2",
      drop: function(event,ui) {
      if($(ui.draggable).parents("#electron_1").length){
      $("#exp_1s").html("1");
      $(this).append('&lt;div id="electron_I"&gt;&lt;/div&gt;');
      contoar++;
              if (contoar == limitare &amp;&amp; n == 1) {
  
              alert("Primul electron al unui orbital este setat sa fie acela cu spinul up!"+"\n"+"Configuratie incheiata cu success!");
              $(this).droppable("disable");
      }
  
      }
      if($(ui.draggable).parents("#electron_2").length){
      $("#exp_1s").html("1");
      $(this).append('&lt;div id="electron_II"&gt;&lt;/div&gt;');
      contoar++;
              if (contoar == limitare &amp;&amp; n == 1) {
  
              alert("Primul electron al unui orbital este setat sa fie acela cu spinul up!"+"\n"+"Configuratie incheiata cu success!");
              $(this).droppable("disable");
      }
  
      }
  
  }
  });
  </code></pre>
  
  <p>Bellow is the entire html code:</p>
  
  <pre><code>&lt;html&gt;
  </code></pre>
  
  <p>
      Reparti&#355;ia electronilor pe orbitali, straturi &#351;i substraturi pentru primele 36 de elemente
      
       
       
      </p>
  
  <pre><code>function activateApp() {
      var infoSelected = document.getElementById("option_selected_text");
      var element= new Array();
  
      element[0]="";
      element[1] = "Hidrogen";
      element[2] = "Heliu";
      element[3] = "Litiu";
      element[4] = "Beriliu";
      element[5] = "Bor";
      element[6] = "Carbon";
      element[7] = "Azot";
      element[8] = "Oxigen";
      element[9] = "Fluor";
      element[10] = "Neon";
      element[11] = "Sodiu";
      element[12] = "Magneziu";
      element[13] = "Aluminiu";
      element[14] = "Siliciu";
      element[15] = "Fosfor";
      element[16] = "Sulf";
      element[17] = "Clor";
      element[18] = "Argon";
      element[19] = "Potasiu";
      element[20] = "Calciu";
      element[21] = "Scandiu";
      element[22] = "Titan";
      element[23] = "Vanadiu";
      element[24] = "Crom";
      element[25] = "Mangan";
      element[26] = "Fier";
      element[27] = "Cobalt";
      element[28] = "Nichel";
      element[29] = "Cupru";
      element[30] = "Zinc";
      element[31] = "Galiu";
      element[32] = "Germaniu";       
      element[33] = "Arsen";
      element[34] = "Seleniu";
      element[35] = "Brom";
      element[36] = "Kripton";
  
  
      var simbol = new Array();
  
      simbol[0] = "";
      simbol[1] = "H";
      simbol[2] = "He ";
      simbol[3] = "Li";
      simbol[4] = "Be";
      simbol[5] = "B";
      simbol[6] = "C";
      simbol[7] = "N";
      simbol[8] = "O";
      simbol[9] = "F";
      simbol[10] = "Ne";
      simbol[11] = "Na";
      simbol[12] = "Mg";
      simbol[13] = "Al";
      simbol[14] = "Si";
      simbol[15] = "P";
      simbol[16] = "S";
      simbol[17] = "Cl";
      simbol[18] = "Ar";
      simbol[19] = "K";
      simbol[20] = "Ca";
      simbol[21] = "Sc";
      simbol[22] = "Ti";
      simbol[23] = "V";
      simbol[24] = "Cr";
      simbol[25] = "Mn";
      simbol[26] = "Fe";
      simbol[27] = "Co";
      simbol[28] = "Ni";
      simbol[29] = "cu";
      simbol[30] = "Zn";
      simbol[31] = "Ga";
      simbol[32] = "Ge";      
      simbol[33] = "As";
      simbol[34] = "se";
      simbol[35] = "Br";
      simbol[36] = "Kr";
  
      var exponent = new Array();
  
      exponent[0] = document.getElementById("exp_1s");
      exponent[1] = document.getElementById("exp_2s");
      exponent[2] = document.getElementById("exp_2p");
      exponent[3] = document.getElementById("exp_3s");
      exponent[4] = document.getElementById("exp_3p");
      exponent[5] = document.getElementById("exp_4s");
      exponent[6] = document.getElementById("exp_3d");
      exponent[7] = document.getElementById("exp_4p");
  
  
      var electron = new Array();
  
      electron[0] = "#up_spin_1s";
      electron[1] = "#down_spin_1s";
      electron[2] = "#up_spin_2s";
      electron[3] = "#down_spin_2s";
      electron[4] = "#up_spin_2p_1";
      electron[5] = "#up_spin_2p_2";
      electron[6] = "#up_spin_2p_3";
      electron[7] = "#down_spin_2p_1";
      electron[8] = "#down_spin_2p_2";
      electron[9] = "#down_spin_2p_3";
      electron[10] = "#up_spin_3s";
      electron[11] = "#down_spin_3s";
      electron[12] = "#up_spin_3p_1";
      electron[13] = "#up_spin_3p_2";
      electron[14] = "#up_spin_3p_3";
      electron[15] = "#down_spin_3p_1";
      electron[16] = "#down_spin_3p_2";
      electron[17] = "#down_spin_3p_3";
      electron[18] = "#up_spin_4s";
      electron[19] = "#down_spin_4s";
      electron[20] = "#up_spin_3d_1";
      electron[21] = "#up_spin_3d_2";
      electron[22] = "#up_spin_3d_3";
      electron[23] = "#up_spin_3d_4";
      electron[24] = "#up_spin_3d_5";
      electron[25] = "#down_spin_3d_1";
      electron[26] = "#down_spin_3d_2";
      electron[27] = "#down_spin_3d_3";
      electron[28] = "#down_spin_3d_4";
      electron[29] = "#down_spin_3d_5";
      electron[30] = "#up_spin_4p_1";
      electron[31] = "#up_spin_4p_2";
      electron[32] = "#up_spin_4p_3";
      electron[33] = "#down_spin_4p_1";
      electron[34] = "#down_spin_4p_2";
      electron[35] = "#down_spin_4p_3";
  
      var tip_spin = new Array();
  
      tip_spin["up"] = "#electron_1";
      tip_spin["down"] = "#electron_2";
  
  
      var cont = false;
  
      var choosed = val.value;
      var n = parseInt(choosed);
      var tip_up = new RegExp("up");
      var tip_down = new RegExp("down");
  
      //tip_up.exec(electron[35]) va returna down;;;  
  
      var a = "#up_spin_1s";
      var b = "#down_spin_1s";
      var c = "#up_spin_2s";
  
      var d = "#electron_1";
      var e = "#electron_2";
      var f = "#electron_1";
  
      var contor = 0;
      var limita = 1;
  
      var contoar = 0;
      var limitare = 1;
  
  $(infoSelected).html("Element: "+"&lt;i&gt;"+element[n]+"&lt;/i&gt;"+"&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;"+"Simbol: "+"&lt;i&gt;"+simbol[n]+"&lt;/i&gt;");
  
  
  $( "#electron_1" ).draggable({
      revert: true    
  });
  $( "#electron_2" ).draggable({
      revert: true    
  });
  
  
  $("#up_spin_1s").droppable({
      accept: "#electron_1, #electron_2",
      drop: function(event,ui) {
      if(!$(ui.draggable).parents("#electron_2").length){
      $("#exp_1s").html("1");
      $(this).append('&lt;div id="electron_I"&gt;&lt;/div&gt;');
      contoar++;
              if (contoar == limitare &amp;&amp; n == 1) {
  
              alert("Primul electron al unui orbital este setat sa fie acela cu spinul up!"+"\n"+"Configuratie incheiata cu success!");
              $(this).droppable("disable");
      }
  
      }
               if($(ui.draggable).parents("#electron_2").length){
      $("#exp_1s").html("1");
      $(this).append('&lt;div id="electron_I"&gt;&lt;/div&gt;');
      contor++;
              if (contor == limita &amp;&amp; n == 1) {
  
              alert("Primul electron al unui orbital este setat sa fie acela cu spinul up!"+"\n"+"Configuratie incheiata cu success!");
              $(this).droppable("disable");
      }
  
      }
  
  }
  });
  
  
  if(n&gt;1){
  for(i = 1 ; i &lt;=35 ; i++)
  {
  
  
  $("#up_spin_1s").droppable({
      accept: "#electron_1, #electron_2",
      drop: function(event,ui) {
      if($(ui.draggable).parents("#electron_1").length){
      $("#exp_1s").html("1");
      $(this).append('&lt;div id="electron_II"&gt;&lt;/div&gt;');
      contoar++;
              if (contoar == limitare &amp;&amp; n == 1) {
  
              alert("Primul electron al unui orbital este setat sa fie acela cu spinul up!"+"\n"+"Configuratie incheiata cu success!");
              $(this).droppable("disable");
      }
  
      }
  
      compute(electron[1],tip_spin["down"],electron[2],tip_spin["up"]);
  }
  });
  
  }
  
  }
  else
  {
  
  for(i = 1 ; i &lt;=35 ; i++){
  $(electron[i]).droppable("disable");
  }
  
  }
  
  
  
  
  }
  
  
  function compute(z,w,r,s) {
  
  var counter = 0;
  var limit = 1;      
      var cur=0;
      var lim=1;
      $(z).droppable({
      accept: w,
      drop: function(event,ui) {
      $("#exp_1s").html("2");
              $(z).append('&lt;div id="electron_II"&gt;&lt;/div&gt;');
      cur++;
              if (cur == lim) {
              $(this).droppable("disable");
      }
      var curu = 0;
      var limi = 1;
      $(r).droppable({
      accept: s,
      drop: function(event,ui) {
      $("#exp_2s").html("1");
              $(r).append('&lt;div id="electron_I"&gt;&lt;/div&gt;');
      curu++;
              if (curu == limi) {
              $(this).droppable("disable");
      }
      }
      });
  
      }
      });
  
  
  
  
  
  
  }
  
  
  
  
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;div id="main"&gt;
  
    &lt;a href="repartitie.html"&gt;Cum se repartizeaz&amp;#259; electronii pe orbitali, straturi &amp;#351;i substraturi &lt;/a&gt;
    &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 
    &lt;a href="lectie.html"&gt; Structura &amp;#238;nveli&amp;#351;ului electronic &lt;/a&gt;
    &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;a href="#" onclick="#"&gt; Help(?) &lt;/a&gt; 
  
  &lt;/div&gt;
  
  
  &lt;div id="config_container"&gt;
   &lt;div id="axis"&gt;
      &lt;img src="images/axis.png"&gt;
   &lt;/div&gt;
  
  
  
   &lt;div id="orbital_container"&gt;
  &lt;div id="orbital_content"&gt;
  &lt;div class="orbital_label"&gt; 4p&lt;sup id="exp_4p"&gt;&lt;div style="display: inline; color: #ffffff;"&gt;0&lt;/div&gt;&lt;/sup&gt; &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_4p_1" class="up_spin_4p_1"&gt;&lt;/div&gt;
  &lt;div id="down_spin_4p_1" class="down_spin_4p_1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_4p_2" class="up_spin_4p_2"&gt;&lt;/div&gt;
  &lt;div id="down_spin_4p_2" class="down_spin_4p_2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_4p_3" class="up_spin_4p_3"&gt;&lt;/div&gt;
  &lt;div id="down_spin_4p_3" class="down_spin_4p_3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="orbital_content"&gt;
  &lt;div class="orbital_label"&gt; 3d&lt;sup id="exp_3d"&gt;&lt;div style="display: inline; color: #ffffff;"&gt;0&lt;/div&gt;&lt;/sup&gt; &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_3d_1" class="up_spin_3d_1"&gt;&lt;/div&gt;
  &lt;div id="down_spin_3d_1" class="down_spin_3d_1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_3d_2" class="up_spin_3d_2"&gt;&lt;/div&gt;
  &lt;div id="down_spin_3d_2" class="down_spin_3d_2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_3d_3" class="up_spin_3d_3"&gt;&lt;/div&gt;
  &lt;div id="down_spin_3d_3" class="down_spin_3d_3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_3d_4" class="up_spin_3d_4"&gt;&lt;/div&gt;
  &lt;div id="down_spin_3d_4" class="down_spin_3d_4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_3d_5" class="up_spin_3d_5"&gt;&lt;/div&gt;
  &lt;div id="down_spin_3d_5" class="down_spin_3d_5"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="orbital_content"&gt;
  &lt;div class="orbital_label"&gt; 4s&lt;sup id="exp_4s"&gt;&lt;div style="display: inline; color: #ffffff;"&gt;0&lt;/div&gt;&lt;/sup&gt; &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_4s" class="up_spin_4s"&gt;&lt;/div&gt;
  &lt;div id="down_spin_4s" class="down_spin_4s"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;div id="orbital_content"&gt;
  &lt;div class="orbital_label"&gt; 3p&lt;sup id="exp_3p"&gt;&lt;div style="display: inline; color: #ffffff;"&gt;0&lt;/div&gt;&lt;/sup&gt; &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_3p_1" class="up_spin_3p_1"&gt;&lt;/div&gt;
  &lt;div id="down_spin_3p_1" class="down_spin_3p_1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_3p_2" class="up_spin_3p_2"&gt;&lt;/div&gt;
  &lt;div id="down_spin_3p_2" class="down_spin_3p_2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_3p_3" class="up_spin_3p_3"&gt;&lt;/div&gt;
  &lt;div id="down_spin_3p_3" class="down_spin_3p_3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;div id="orbital_content"&gt;
  &lt;div class="orbital_label"&gt; 3s&lt;sup id="exp_3s"&gt;&lt;div style="display: inline; color: #ffffff;"&gt;0&lt;/div&gt;&lt;/sup&gt; &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_3s" class="up_spin_3s"&gt;&lt;/div&gt;
  &lt;div id="down_spin_3s" class="down_spin_3s"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="orbital_content"&gt;
  &lt;div class="orbital_label"&gt; 2p&lt;sup id="exp_2p"&gt;&lt;div style="display: inline; color: #ffffff;"&gt;0&lt;/div&gt;&lt;/sup&gt; &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_2p_1" class="up_spin_2p_1"&gt;&lt;/div&gt;
  &lt;div id="down_spin_2p_1" class="down_spin_2p_1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_2p_2" class="up_spin_2p_2"&gt;&lt;/div&gt;
  &lt;div id="down_spin_2p_2" class="down_spin_2p_2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_2p_3" class="up_spin_2p_3"&gt;&lt;/div&gt;
  &lt;div id="down_spin_2p_3" class="down_spin_2p_3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="orbital_content"&gt;
  &lt;div class="orbital_label"&gt; 2s&lt;sup id="exp_2s"&gt;&lt;div style="display: inline; color: #ffffff;"&gt;0&lt;/div&gt;&lt;/sup&gt; &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_2s" class="up_spin_2s"&gt;&lt;/div&gt;
  &lt;div id="down_spin_2s" class="down_spin_2s"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="orbital_content"&gt;
  &lt;div class="orbital_label"&gt; 1s&lt;sup id="exp_1s"&gt;&lt;div style="display: inline; color: #ffffff;"&gt;0&lt;/div&gt;&lt;/sup&gt; &lt;/div&gt;
  
  &lt;div class="electron_pear"&gt;
  &lt;div id="up_spin_1s" class="up_spin_1s"&gt;&lt;/div&gt;
  &lt;div id="down_spin_1s" class="down_spin_1s"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
   &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div id="control_container"&gt;
   &lt;div id="settings_container"&gt;
   &lt;div id="settings_content"&gt;
   &lt;div class="z_text"&gt; Z = &lt;/div&gt;  
   &lt;select id="val" name="val"&gt;
  &lt;option value="1" selected="selected"&gt;1&lt;/option&gt;
  &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;option value="3"&gt;3&lt;/option&gt;
  &lt;option value="4"&gt;4&lt;/option&gt;
  &lt;option value="5"&gt;5&lt;/option&gt;
  &lt;option value="6"&gt;6&lt;/option&gt;
  &lt;option value="7"&gt;7&lt;/option&gt;
  &lt;option value="8"&gt;8&lt;/option&gt;
  &lt;option value="9"&gt;9&lt;/option&gt;
  &lt;option value="10"&gt;10&lt;/option&gt;
  &lt;option value="11"&gt;11&lt;/option&gt;
  &lt;option value="12"&gt;12&lt;/option&gt;
  &lt;option value="13"&gt;13&lt;/option&gt;
  &lt;option value="14"&gt;14&lt;/option&gt;
  &lt;option value="15"&gt;15&lt;/option&gt;
  &lt;option value="16"&gt;16&lt;/option&gt;
  &lt;option value="17"&gt;17&lt;/option&gt;
  &lt;option value="18"&gt;18&lt;/option&gt;
  &lt;option value="19"&gt;19&lt;/option&gt;
  &lt;option value="20"&gt;20&lt;/option&gt;
  &lt;option value="21"&gt;21&lt;/option&gt;
  &lt;option value="22"&gt;22&lt;/option&gt;
  &lt;option value="23"&gt;23&lt;/option&gt;
  &lt;option value="24"&gt;24&lt;/option&gt;
  &lt;option value="25"&gt;25&lt;/option&gt;
  &lt;option value="26"&gt;26&lt;/option&gt;
  &lt;option value="27"&gt;27&lt;/option&gt;
  &lt;option value="28"&gt;28&lt;/option&gt;
  &lt;option value="29"&gt;29&lt;/option&gt;
  &lt;option value="30"&gt;30&lt;/option&gt;
  &lt;option value="31"&gt;31&lt;/option&gt;
  &lt;option value="32"&gt;32&lt;/option&gt;
  &lt;option value="33"&gt;33&lt;/option&gt;
  &lt;option value="34"&gt;34&lt;/option&gt;
  &lt;option value="35"&gt;35&lt;/option&gt;
  &lt;option value="36"&gt;36&lt;/option&gt;
   &lt;/select&gt;
   &lt;div id="electron_1"&gt;&lt;/div&gt;
   &lt;div id="electron_2"&gt;&lt;/div&gt;
   &lt;a href="javascript: void(0)" &gt;&lt;input type="button" name="Submit" value="Start" class="confirmed" onclick="activateApp();"/&gt;&lt;/a&gt;
   &lt;a href="javascript: void(0)" &gt;&lt;input type="button" name="Submit" value="Resetare" class="erase" onclick="#"/&gt; &lt;/a&gt; 
  
  
   &lt;/div&gt;
  
   &lt;div id="settings_content" style="margin-top: 15px;"&gt;
  &lt;div id="option_selected_text"&gt;&lt;/div&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Any help would be very usefull! </p>