您的位置: 首页  >  技术问答  >  JQuery无法正确访问拖放到其他元素（可拖动）上的可拖动元素

JQuery无法正确访问拖放到其他元素（可拖动）上的可拖动元素

分类: 技术问答 • 2022-05-17 13:08:20
问题描述：

访问可拖放元素时遇到问题，该元素可以放在另一个可拖动元素元素上。我想要的代码是根据被丢弃的元素执行不同的指令。例如，如果我在目标（这是可放下的元素）上放置一个id为“element1”的元素，将执行某些指令;如果我在目标（这是droppable元素）上放置一个id为“element2”的元素，将会执行另一组指令。对于最后一句中描述的例子，根据我所知，访问元素1的父母，可以使用$（ui.draggable）.parents（“＃element1”），以访问元素2的父母，可以使用$（ui.draggable）.parents（“＃element2”）。通过使用长度属性，我应该得到父母的数量。用于droppable元素的放置事件，这两个序列$（ui.draggable）.parents（“＃element1”）。length，$（ui.draggable）.parents（“＃element2”） .length它可以检测到哪个元素被丢弃，以便执行正确的指令。 在我的应用程序中，可拖拽元素是＃up_spin_1s，并且可拖拽对象是＃electron_1和#electr_1。所以我想要的是根据被丢弃的元素执行不同的指令。只有来自的指令* if（$（ui.draggable）.parents（“＃electron_1”）。length）{*块才会被执行，无论哪个元素被丢弃。JQuery无法正确访问拖放到其他元素（可拖动）上的可拖动元素

娄是所讨论的代码：

$("#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"); 
    } 

    } 

} 
});

娄是整个HTML代码：

<html>

Reparti ţ IA electronilor PE orbitali，straturi ş我substraturi pentru primele 36日菁元素 

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>

任何帮助将是非常有用的！

答

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

$(ui.draggable).parents("#element1");在放置事件意味着“给我当前拖动的对象的所有父母与编号element1”。请注意，ui.draggable已经是jQuery对象，不需要调用$函数。

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

看着你的代码，你实际上正在拖动#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"仅在还没有接受放弃时放弃。如果要将对象返回到起始位置，最好在成功放置时手动执行，而不使用默认的还原动画。

相关推荐