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

【问题标题】：JQuery cannot properly access draggable elements dropped on another element (which is draggable)JQuery 无法正确访问放置在另一个元素上的可拖动元素（可拖动）
【发布时间】：2011-05-01 15:00:25
【问题描述】：

我在访问可拖放到另一个元素上的可拖动元素时遇到问题，这是一个可拖动元素。我想要代码做的是根据删除的元素执行不同的指令。例如，如果我将一个 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 应该检测哪个元素被丢弃，以便执行正确的指令。 在我的应用程序中，可放置元素是#up_s​​pin_1s，可放置元素是#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");
    }

    }

}
});

下面是整个html代码：

<html>

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: "+"<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>

任何帮助都会非常有用！

【问题讨论】：

    标签： javascript html jquery-ui


    【解决方案1】：

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

    $(ui.draggable).parents("#element1"); 在 drop 事件中的意思是“给我当前拖动对象的所有父对象，id 为element1”。注意ui.draggable已经是一个jQuery对象，不需要调用$函数。

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

    查看您的代码，您实际上是在拖动#electron_1 和#electron_2。要检查在您的 drop 事件中丢弃了哪一个，请使用 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" 仅在它没有被丢弃在接受的 droppable 上时才恢复。如果您想将对象返回到起始位置，最好在成功放置时手动执行此操作，而不使用默认的还原动画。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-03-25
      • 2023-03-20
      • 1970-01-01
      • 1970-01-01
      • 2017-02-20
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode