jQuery的可放置功能无效

| 我想使用jQuery库创建一个将某些元素放到其他元素上的应用程序。可拖动功能似乎有效，但可放置功能无效。我尝试将id分配给可拖放对象，因为它解决了某人的问题（该人的问题的解决方案是更改库（问题是库）），这与我的类似。我从这里使用了jquery库和js（修改后的js嵌入到html文档中，代码列在下面）：http://superdit.com/2011/04/02/drag-drop-shopping-cart-using- jQuery的/。我再说一遍，除了droppable功能之外，其他所有功能都有效。任何帮助将是巨大的！谢谢！（下面是html代码（包括js）和CSS）：

<html>

Repartiţiaelectroilor pe orbitali，地下饱和地下36 de elemente

//superfunctia
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\";


infoSelected.innerHTML = \"Element: \"+\"<i>\"+element[val.value]+\"</i>\"+\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"+\"Simbol: \"+\"<i>\"+simbol[val.value]+\"</i>\";
$( \".electron_1\" ).draggable({
    revert: true    
});
$( \".electron_2\" ).draggable({
    revert: true    
}); 
$(\"#up_spin\").droppable({
    accept: \".electron_1\",
    activeClass: \"drop-active\",
    hoverClass: \"drop-hover\",
    drop: function(event,ui) {
        var elect1 = ui.draggable.html();
        var upid = ui.draggable.attr(\"id\");
        var html = \'<div class=\"electron1 up_dropped\">\';
            html = html + \'<div class=\"delete_mark\">\';
            html = html + \'<a onclick=\"remove(this)\" class=\"remove \'+upid+\'\">&times;</a>\';
                html = html + elect1+\'</div>\';
                $(\"#up_spin\").append(html);
    }
});

$(\"#down_spin\").droppable({
    accept: \".electron_2\",
    activeClass: \"drop-active\",
    hoverClass: \"drop-hover\",
    drop: function(event,ui) {
        var elect2 = ui.draggable.html();
        var downid = ui.draggable.attr(\"id\");
        var html = \'<div class=\"down_spin up_dropped\">\';
                html = html + \'<div class=\"delete_mark\">\';
                html = html + \'<a onclick=\"remove(this)\" class=\"remove \'+downupid+\'\">&times;</a>\';
                html = html + \'<div/>\'+elect2+\'</div>\';
                $(\".down_spin\").append(html);
    }
});




}
</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=\"help.html\"> 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 </div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

</div>

<div id=\"orbital_content\">
<div class=\"orbital_label\"> 3d </div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

</div>

<div id=\"orbital_content\">
<div class=\"orbital_label\"> 4s </div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

</div>


<div id=\"orbital_content\">
<div class=\"orbital_label\"> 3p </div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

</div>


<div id=\"orbital_content\">
<div class=\"orbital_label\"> 3s </div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

</div>

<div id=\"orbital_content\">
<div class=\"orbital_label\"> 2p </div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

</div>

<div id=\"orbital_content\">
<div class=\"orbital_label\"> 2s </div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></div>
</div>

</div>

<div id=\"orbital_content\">
<div class=\"orbital_label\"> 1s </div>

<div class=\"electron_pear\">
<div id=\"up_spin\"></div>
<div id=\"down_spin\"></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 class=\"electron_1\"></div>
 <div class=\"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=\"checkForm();\"/> </a> 


 </div>

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

 </div>

// CSS


body {
    font-family: Arial, \"Free Sans\";
    margin: 0;
    padding: 0;
 }
#main {
//  position: fixed;
    background: #25bcde;
    margin-top: 0;
    padding: 2px 0 6px 0;
    text-align: center;
    border-bottom: solid 1px #118090;
}
#main a {
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial;
}
#main a:hover {
    text-decoration: underline;
}


#config_container {
    width: 750px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 10px;
}

#axis {
//  margin-left: 200px;
    margin-top: 0px;
    padding: 5px 0 5px 0;
    float: left;
}

.clear {
    clear:both;
}


.confirmed {
    display: inline;
//  position: absolute;
    background: #25bcde;
    width: 120px;
    height: 24px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    float: left;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial;
    text-decoration: underline;
    cursor: pointer;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    border: 2px solid #25bcde;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    z-index: 9;
}

a:hover *.confirmed {
    font-style: italic;
}

.erase {
    display: inline;
//  position: absolute;
    background: #25bcde;
    width: 100px;
    height: 24px;
    margin-left: 5px;
    text-align: center;
    float: left;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial;
    text-decoration: underline;
    cursor: pointer;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    border: 2px solid #25bcde;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    z-index: 9;
}

a:hover *.erase {
    font-style: italic;
}

#orbital_container {
    display: block;
//  position: relative;
    width: 670px;
    margin-left: 5px;
    margin-top: 12px;
//  margin-bottom: 10px;
//  clear: right;
}

#orbital_content {
    display: table;
    margin-bottom: 20px;
}

.orbital_label {
    display: inline;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    float: left;
    color: #6099cc;
    padding: 6px;
    margin-right: 14px;
}

.electron_pear {
    display: inline;    
}

#up_spin {
    background: #ef7812;
    display: inline;
    float: left;
//  padding: 4px;
    margin: 0px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    z-index: 0;
}

#down_spin {
    background: #ef7812;
    display: inline;
    float: left;
//  padding: 4px;
    margin: 0px;
    margin-right: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    z-index: 0;
}

#control_container {
//  position: relative;
//  display: inline;
    width: 500px;
    float: right;
//  text-align: center;
}

#settings_container {
    display: block;
//  position: relative;
}

#settings_content {
    display: table; 
}

.z_text {
    display: inline;
//  position: absolute;
    margin-right: 5px;
    background-color: #fefefe;
    float: left;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial;

}

#val {
    display: inline;
//  position: absolute;
    margin-right: 10px;
    float: left;
//  font-size: 16px;
    font-weight: bold;
    z-index: 0;
}

.electron_1 {
    background-color: #ef7812;
    background-image: url(\'images/arrow-up.png\');
    background-repeat:no-repeat;
    background-position: center bottom; 
    display: inline;
    margin-left: 10px;
    margin-top: -5px;
    float: left;
    width: 29px;
    height: 29px;
//  font-size: 16px;
    cursor: pointer;
    z-index: 5;
}

.electron_2 {
    background-color: #ef7812;
    background-image: url(\'images/arrow-down.png\');
    background-repeat:no-repeat;
    background-position: center bottom;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: -5px;
    float: left;
    width: 29px;
    height: 29px;
//  font-size: 16px;
    cursor: pointer;
    z-index: 5;
}

#option_selected_text {
    display: inline;
    margin-top: 5px;
    width: 480px;
    height: 16px;
    float: left;
//  text-align: left;   
    font-size: 16px;
    font-weight: bold;
    color: #3e3e3e;
}

.drop-active {
    background-color: #68bf32;
}

.drop-hover {
    background-color: #32bf32;
}

.up_dropped {
    cursor: default;
}

.delete_mark {
    text-align: right;
    font-size: 3px;
}

已邀请:

1 个回复

桔马牛

您的两个可拖动处理程序之间存在不一致，在第二行的最后一行中，您使用了类选择器\“。down_spin \”，在其他所有地方都使用了id选择器\“＃down_spin \”。另一个大问题是，文档中不应没有两个DOM元素具有相同的ID，请尝试将所有up_spin和down_spin元素更改为具有这些名称的类，然后将ID选择器更改为类选择器。确保您决定要按照上述规则使用类或id，就像在静态标记中使用id一样，但要在可放置处理程序的html注入中使用类。同样，在down_spin可拖动处理程序中，从html字符串连接中删除\'\'位，您没有在up_spin处理程序中使用它，而且还是不正确。而且，如果您使用的是jQuery，则最好保持一致并在各处使用它，请进行以下更改：

infoSelected.innerHTML = \"Element: \"+\"<i>\"+element[val.value]+\"</i>\"+\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"+\"Simbol: \"+\"<i>\"+simbol[val.value]+\"</i>\";

至：

$(infoSelected).html(\"Element: \"+\"<i>\"+element[val.value]+\"</i>\"+\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"+\"Simbol: \"+\"<i>\"+simbol[val.value]+\"</i>\");

完成所有这些清理之后，它可能会神奇地开始工作。

要回复问题请先登录或注册

jQuery的可放置功能无效

1 个回复

发起人

jquery

html

drag_and_drop

draggable

droppable

问题状态

jQuery的可放置功能无效

与内容相关的链接

1 个回复

发起人

jquery

html

drag_and_drop

draggable

droppable

问题状态