JQuery無法正確訪問拖放到其他元素（可拖動）上的可拖動元素

訪問可拖放元素時遇到問題，該元素可以放在另一個可拖動元素元素上。我想要的代碼是根據被丟棄的元素執行不同的指令。例如，如果我在目標（這是可放下的元素）上放置一個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>

任何幫助將是非常有用的！

來源

2011-05-01 zxcvbnm

我不確定我是否理解正確，但這裏有一些想法。

$(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"僅在還沒有接受放棄時放棄。如果要將對象返回到起始位置，最好在成功放置時手動執行，而不使用默認的還原動畫。

來源

2011-05-01 15:59:21 DarthJDG

JQuery無法正確訪問拖放到其他元素（可拖動）上的可拖動元素

回答

相關問題