3
我想創建一個應用程序，使用jQuery庫來刪除某些元素在其他元素上。可拖動功能似乎正在工作，但可拖放功能不起作用。我試圖將id分配給可拖動和可拖動，因爲它解決了某人的問題（該問題的解決方案是更改庫（問題是庫）），這與我的類似。我使用jQuery庫和js（修改後的js嵌入在html文檔中，代碼如下所示）：http://superdit.com/2011/04/02/drag-drop-shopping-cart-using-jquery/。我會再次說，除了可丟棄的功能，一切都可以工作。JQuery droppable功能不起作用
任何幫助將是偉大的！謝謝！
（下面是HTML代碼（其包括JS）和CSS）：
<html>
Reparti ţ IA electronilor PE orbitali，straturi ş我substraturi pentru primele 36日菁元素
//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>"+" "+"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+'">×</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+'">×</a>';
html = html + '<div/>'+elect2+'</div>';
$(".down_spin").append(html);
}
});
}
</script>
<div id="main">
<a href="repartitie.html">Cum se repartizează electronii pe orbitali, straturi şi substraturi </a>
<a href="lectie.html"> Structura învelişului electronic </a>
<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;
}
是否可以通過http://www.jsfiddle.net上的小演示覆制您遇到的問題？ – 2011-04-19 20:06:05