开发者

JQuery droppable functionality doesn't work

开发者 https://www.devze.com 2023-02-27 07:21 出处：网络
I want to create an application that drops certain elements on other elements, using jquery library. The draggable feature seems to be working, but the droppable feature doesn\'t work. I tried to assi
相关专题：drag-and-dropdraggabledroppablejquery

I want to create an application that drops certain elements on other elements, using jquery library. The draggable feature seems to be working, but the droppable feature doesn't work. I tried to assign id to draggable and droppable, because it solved someone's problem (the solution for that person's problem was to change the library(the problem was the library)), which is similar to mine. I used jquery library and js (modified js embeded in the html document with it's code listed bellow) from here: http://superdit.com/2011/04/02/drag-drop-shopping-cart-using-jquery/. I would say again that everything works except the droppable feature.

Any help would be great! Thank you!

(Below is the html code (which includes js) and the css):

<html>

Repartiţia electronilor pe orbitali, straturi şi substraturi pentru 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="开发者_JAVA百科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;
}

There are inconsistencies between your two draggable handlers, in the last line for the second one you use a class selector ".down_spin", where everywhere else you used id selector "#down_spin".

The other big problem is that no two DOM elements should have the same id in your document, try changing all up_spin and down_spin elements to have a class by those names and change your id selectors to class selectors. Make sure you make up your mind wether you want to use classes or ids by the above rules, as you use id in your static markup, but classes in your droppable handler's html injection.

Also in your down_spin draggable handler remove the '' bit from your html string concatenation, you haven't got it in the up_spin handler, and it's not right anyway.

And if you're using jQuery, it's best to be consistent and use it everywhere, change:

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

to:

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

After all these clean-ups, it might just magically start working.

0

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9