JQuery cannot properly access draggable elements dropped on another element (which is draggable)

Question

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 $(ui.draggable).parents("#element1") ,to access element2's parents, one may use $(ui.draggable).parents("#element2"). By using the length property I should get the number of parents. Used in the drop event of the droppable element, these two sequences $(ui.draggable).parents("#element1").length, $(ui.draggable).parents("#element2").length it shoul be detected which element was dropped so that the proper instructions will be executed. In my application the droppable element is #up_spin_1s and the droppables are #electron_1 and #electron_1. So what I want is to execute different instructions depending on the dropped element. Only the instructions from the *if($(ui.draggable).parents("#electron_1").length){* block are executed, no matter what element is dropped.

Bellow is the discussed 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('');
    contoar++;
            if (contoar == limitare && n == 1) {

            alert("Primul electron al unui orbital este setat sa fie acela cu spinul up!"+"
"+"Configuratie incheiata cu success!");
            $(this).droppable("disable");
    }

    }
    if($(ui.draggable).parents("#electron_2").length){
    $("#exp_1s").html("1");
    $(this).append('');
    contoar++;
            if (contoar == limitare && n == 1) {

            alert("Primul electron al unui orbital este setat sa fie acela cu spinul up!"+"
"+"Configuratie incheiata cu success!");
            $(this).droppable("disable");
    }

    }

}
});

Bellow is the entire html code:

Repartiţia electronilor pe orbitali, straturi şi substraturi pentru primele 36 de elemente

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: "+""+element[n]+""+"      "+"Simbol: "+""+simbol[n]+"");


$( "#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('');
    contoar++;
            if (contoar == limitare && n == 1) {

            alert("Primul electron al unui orbital este setat sa fie acela cu spinul up!"+"
"+"Configuratie incheiata cu success!");
            $(this).droppable("disable");
    }

    }
             if($(ui.draggable).parents("#electron_2").length){
    $("#exp_1s").html("1");
    $(this).append('');
    contor++;
            if (contor == limita && n == 1) {

            alert("Primul electron al unui orbital este setat sa fie acela cu spinul up!"+"
"+"Configuratie incheiata cu success!");
            $(this).droppable("disable");
    }

    }

}
});


if(n>1){
for(i = 1 ; i <=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('');
    contoar++;
            if (contoar == limitare && n == 1) {

            alert("Primul electron al unui orbital este setat sa fie acela cu spinul up!"+"
"+"Configuratie incheiata cu success!");
            $(this).droppable("disable");
    }

    }

    compute(electron[1],tip_spin["down"],electron[2],tip_spin["up"]);
}
});

}

}
else
{

for(i = 1 ; i <=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('');
    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('');
    curu++;
            if (curu == limi) {
            $(this).droppable("disable");
    }
    }
    });

    }
    });






}



  Cum se repartizează electronii pe orbitali, straturi şi substraturi 
         
   Structura învelişului electronic 
        
   Help(?)  





 
    
 



 

 4p⁰ 



















 3d⁰ 





























 4s⁰ 










 3p⁰ 




















 3s⁰ 









 2p⁰ 



















 2s⁰ 









 1s⁰ 








 
 

 
 
 
  Z =

Any help would be very usefull!

JQuery cannot properly access draggable elements dropped on another element (which is draggable)

Answers (1)

Related Questions