JQuery无法正确访问放在另一个元素上的可拖动元素（可拖动）

时间：2011-05-01 15:00:25

标签： javascript html jquery-ui

我在访问可拖放到其他元素上的可拖动元素时遇到问题，这是一个可拖动的元素。我想要的代码是根据被删除的元素执行不同的指令。例如，如果我在目标上删除一个id为“element1”的元素（这是可放置的元素），那么将执行某些指令;如果我在目标上删除一个id为“element2”的元素（这是可放置的元素），那么将执行另一组指令。对于上一个短语中描述的示例，根据我所知，访问element1的一个父母，可以使用 $（ui.draggable）.parents（“＃element1”） ，要访问element2的父母，可以使用 $（ui.draggable）.parents（“＃element2”） 。通过使用长度属性，我应该得到父母的数量。在droppable元素的drop事件中使用，这两个序列 $（ui.draggable）.parents（“＃element1”）。length ， $（ui.draggable）.parents（“＃element2”）。length 应检测哪个元素被删除，以便执行正确的指令。 在我的应用程序中，droppable元素是 #up_s​​pin_1s ，而droppables是＃electron_1 和＃electron_1。所以我想要的是根据被删除的元素执行不同的指令。只有 * if（$（ui.draggable）.parents（“＃electron_1”）。length）{* 块的指令才会被执行，无论丢弃什么元素。

贝娄是讨论过的代码：

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

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

    }

}
});

Bellow是整个HTML代码：

<html>

    Repartiţiaelectrililorpe orbitali，straturişinbasraturipentru 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: "+"<i>"+element[n]+"</i>"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+"Simbol: "+"<i>"+simbol[n]+"</i>");


$( "#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('<div id="electron_I"></div>');
    contoar++;
            if (contoar == limitare && 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('<div id="electron_I"></div>');
    contor++;
            if (contor == limita && 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>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('<div id="electron_II"></div>');
    contoar++;
            if (contoar == limitare && 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 <=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('<div id="electron_II"></div>');
    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('<div id="electron_I"></div>');
    curu++;
            if (curu == limi) {
            $(this).droppable("disable");
    }
    }
    });

    }
    });






}







</script>


<div id="main">

  <a href="repartitie.html">Cum se repartizeaz&#259; electronii pe orbitali, straturi &#351;i substraturi </a>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  <a href="lectie.html"> Structura &#238;nveli&#351;ului electronic </a>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="#" onclick="#"> Help(?) </a> 

</div>


<div id="config_container">
 <div id="axis">
    <img src="images/axis.png">
 </div>



 <div id="orbital_container">
<div id="orbital_content">
<div class="orbital_label"> 4p<sup id="exp_4p"><div style="display: inline; color: #ffffff;">0</div></sup> </div>

<div class="electron_pear">
<div id="up_spin_4p_1" class="up_spin_4p_1"></div>
<div id="down_spin_4p_1" class="down_spin_4p_1"></div>
</div>

<div class="electron_pear">
<div id="up_spin_4p_2" class="up_spin_4p_2"></div>
<div id="down_spin_4p_2" class="down_spin_4p_2"></div>
</div>

<div class="electron_pear">
<div id="up_spin_4p_3" class="up_spin_4p_3"></div>
<div id="down_spin_4p_3" class="down_spin_4p_3"></div>
</div>

</div>

<div id="orbital_content">
<div class="orbital_label"> 3d<sup id="exp_3d"><div style="display: inline; color: #ffffff;">0</div></sup> </div>

<div class="electron_pear">
<div id="up_spin_3d_1" class="up_spin_3d_1"></div>
<div id="down_spin_3d_1" class="down_spin_3d_1"></div>
</div>

<div class="electron_pear">
<div id="up_spin_3d_2" class="up_spin_3d_2"></div>
<div id="down_spin_3d_2" class="down_spin_3d_2"></div>
</div>

<div class="electron_pear">
<div id="up_spin_3d_3" class="up_spin_3d_3"></div>
<div id="down_spin_3d_3" class="down_spin_3d_3"></div>
</div>

<div class="electron_pear">
<div id="up_spin_3d_4" class="up_spin_3d_4"></div>
<div id="down_spin_3d_4" class="down_spin_3d_4"></div>
</div>

<div class="electron_pear">
<div id="up_spin_3d_5" class="up_spin_3d_5"></div>
<div id="down_spin_3d_5" class="down_spin_3d_5"></div>
</div>

</div>

<div id="orbital_content">
<div class="orbital_label"> 4s<sup id="exp_4s"><div style="display: inline; color: #ffffff;">0</div></sup> </div>

<div class="electron_pear">
<div id="up_spin_4s" class="up_spin_4s"></div>
<div id="down_spin_4s" class="down_spin_4s"></div>
</div>

</div>


<div id="orbital_content">
<div class="orbital_label"> 3p<sup id="exp_3p"><div style="display: inline; color: #ffffff;">0</div></sup> </div>

<div class="electron_pear">
<div id="up_spin_3p_1" class="up_spin_3p_1"></div>
<div id="down_spin_3p_1" class="down_spin_3p_1"></div>
</div>

<div class="electron_pear">
<div id="up_spin_3p_2" class="up_spin_3p_2"></div>
<div id="down_spin_3p_2" class="down_spin_3p_2"></div>
</div>

<div class="electron_pear">
<div id="up_spin_3p_3" class="up_spin_3p_3"></div>
<div id="down_spin_3p_3" class="down_spin_3p_3"></div>
</div>

</div>


<div id="orbital_content">
<div class="orbital_label"> 3s<sup id="exp_3s"><div style="display: inline; color: #ffffff;">0</div></sup> </div>

<div class="electron_pear">
<div id="up_spin_3s" class="up_spin_3s"></div>
<div id="down_spin_3s" class="down_spin_3s"></div>
</div>

</div>

<div id="orbital_content">
<div class="orbital_label"> 2p<sup id="exp_2p"><div style="display: inline; color: #ffffff;">0</div></sup> </div>

<div class="electron_pear">
<div id="up_spin_2p_1" class="up_spin_2p_1"></div>
<div id="down_spin_2p_1" class="down_spin_2p_1"></div>
</div>

<div class="electron_pear">
<div id="up_spin_2p_2" class="up_spin_2p_2"></div>
<div id="down_spin_2p_2" class="down_spin_2p_2"></div>
</div>

<div class="electron_pear">
<div id="up_spin_2p_3" class="up_spin_2p_3"></div>
<div id="down_spin_2p_3" class="down_spin_2p_3"></div>
</div>

</div>

<div id="orbital_content">
<div class="orbital_label"> 2s<sup id="exp_2s"><div style="display: inline; color: #ffffff;">0</div></sup> </div>

<div class="electron_pear">
<div id="up_spin_2s" class="up_spin_2s"></div>
<div id="down_spin_2s" class="down_spin_2s"></div>
</div>

</div>

<div id="orbital_content">
<div class="orbital_label"> 1s<sup id="exp_1s"><div style="display: inline; color: #ffffff;">0</div></sup> </div>

<div class="electron_pear">
<div id="up_spin_1s" class="up_spin_1s"></div>
<div id="down_spin_1s" class="down_spin_1s"></div>
</div>

</div>

 </div>
 </div>

 <div id="control_container">
 <div id="settings_container">
 <div id="settings_content">
 <div class="z_text"> Z = </div>  
 <select id="val" name="val">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
 </select>
 <div id="electron_1"></div>
 <div id="electron_2"></div>
 <a href="javascript: void(0)" ><input type="button" name="Submit" value="Start" class="confirmed" onclick="activateApp();"/></a>
 <a href="javascript: void(0)" ><input type="button" name="Submit" value="Resetare" class="erase" onclick="#"/> </a> 


 </div>

 <div id="settings_content" style="margin-top: 15px;">
<div id="option_selected_text"></div>

 </div>

任何帮助都会非常有用！

1 个答案:

答案 0 :(得分：2)

我不确定我是否理解正确，但这里有一些想法。

drop事件中的

$(ui.draggable).parents("#element1");表示“向我提供当前拖动对象的所有父母，其ID为element1”。请注意，ui.draggable已经是jQuery对象，无需调用$函数。

您可以使用ui.draggable.parents("#element1").length检查#element1是否属于当前拖动对象的父项（返回1或0）。请注意parents() NOT 会返回当前拖动的对象，只有它的祖先以其直接父级开头。

查看代码，实际上是在拖动#electron_1和#electron_2。要检查放弃事件中丢弃了哪一个，请使用if(ui.draggable.attr('id') == 'electron_1'){ /* Do stuff */ }。

我不认为你的if($(ui.draggable).parents("#electron_1").length){...曾经有效，你之所以这么认为是因为我找到了这句话：

if(!$(ui.draggable).parents("#electron_2").length){

以上总是如此，因为返回的jQuery对象的长度始终为0。

此外，我不确定这是否是故意的，但在可拖动上设置revert:true将导致它始终恢复到其原始位置，这可能会让用户感到困惑。您可以使用revert:"invalid"仅在未接受放弃的情况下将其删除。如果要将对象返回到起始位置，最好在成功删除时手动执行，而不使用默认的恢复动画。

相关问题
最新问题