Question

Я хочу создать приложение, которое отбрасывает определенные элементы на другие элементы, используя библиотеку jquery.Функция перетаскивания, кажется, работает, но функция сбрасывания не работает.Я попытался присвоить идентификатор перетаскиваемому и сбрасываемому объектам, потому что это решило чью-то проблему (решение проблемы этого человека состояло в том, чтобы изменить библиотеку (проблема заключалась в библиотеке)), что аналогично моей.Отсюда я использовал библиотеку jquery и js (модифицированный js, встроенный в html-документ с указанным ниже кодом): http://superdit.com/2011/04/02/drag-drop-shopping-cart-using-jquery/. Я бы еще раз сказал, что все работает, кроме функции сбрасывания.

Любая помощь будет отличной!Спасибо!

(Ниже приведен HTML-код (который включает в себя js) и CSS):

<html>

Repartiţia electronicilor pe orbitali, straturi şi substraturi pentru primele primele 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;
}

DarthJDG · Answer 1 · 20 апреля 2011

Есть несоответствия между вашими перетаскиваемыми обработчиками, в последней строке для второй вы используете селектор класса ".down_spin", где везде, где вы использовали селектор идентификатора "#down_spin".

Другойбольшая проблема в том, что никакие два элемента DOM не должны иметь одинаковый идентификатор в вашем документе, попробуйте изменить все элементы up_spin и down_spin , чтобы иметь класс по этим именам, и изменить селекторы идентификатора на классселекторы.Убедитесь, что вы решили использовать классы или идентификаторы по вышеуказанным правилам, так как вы используете 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 не работает

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы