aceuk007 Posted January 21, 2016 Share Posted January 21, 2016 (edited) UPDATE - Drag & Drop is working But need dropped item to be invisable. Again this was working, code in css #fruit > * { display: none; } Code done for each box New jsfiddle -jsfiddle.net/eru2mc2k/1/ Hi My first post here so hope I've posted everything correct. My drag & drop was working fine until I added the following code in script. shuffleList();function shuffleList(){var origList = $("#dragsource li").detach();var newList = origList.clone();for(var i=0; i<newList.length; i++){var randomIndex = randomInt(newList.length - i);newList[i] = origList.splice(randomIndex, 1);$("#dragsource").append(newList[i]); }}function randomInt(maxNum){return Math.floor(Math.random()*maxNum);}$(document).ready(function () {var $lis = $("#dragsource li").hide();$lis.slice(0,20).show();var size_li = $lis.length;})I The above code shuffles my list and displays 20 items from it ,which I need Can someone please look at this so the drag and drop work again. Thank you. Here's jsfiddle http://jsfiddle.net/W4Km8/8725/ Edited January 25, 2016 by aceuk007 Link to comment Share on other sites More sharing options...
Ingolme Posted January 21, 2016 Share Posted January 21, 2016 I assume the drag and drop is done by event handlers attached to the elements. These event handlers were attached to the original list, but not to the new list. When you shuffle the list you need to add these event handlers to the new elements. The other solution would be to rearrange the existing elements instead of creating new ones. Link to comment Share on other sites More sharing options...
john_jack Posted January 21, 2016 Share Posted January 21, 2016 there is something wrong with window.onload = function() { what i did is comment the line above and comment the last }; and it worked . Good Luck. Link to comment Share on other sites More sharing options...
aceuk007 Posted January 21, 2016 Author Share Posted January 21, 2016 Ingolme & john_jack Thank you for replying.. I should explain that I have almost no understanding of this. I have got this far by finding bits of code for what I want to do . Would it be possible for you to show how it should look Cheers Link to comment Share on other sites More sharing options...
john_jack Posted January 21, 2016 Share Posted January 21, 2016 try it with this Js : the drag & drop is working : shuffleList(); function shuffleList() { var origList = $("#dragsource li").detach(); var newList = origList.clone(); for (var i = 0; i < newList.length; i++) { var randomIndex = randomInt(newList.length - i); newList[i] = origList.splice(randomIndex, 1); $("#dragsource").append(newList[i]); } alert("newlist = "+ newList.length +"original list"+ origList.length); } function randomInt(maxNum) { return Math.floor(Math.random() * maxNum); } $(document).ready(function() { var $lis = $("#dragsource li").hide(); $lis.slice(0, 18).show(); var size_li = $lis.length; }); //window.onload = function() { var target1 = document.getElementById("fruit"); var target2 = document.getElementById("veg"); var target3 = document.getElementById("games"); var target4 = document.getElementById("numbers"); var list = document.querySelectorAll("#dragsource li"); for (i = 0; i < list.length; i++) { list[i].draggable = true; list[i].ondragstart = function(event) { var event = event || window.event; var dt = event.dataTransfer; dt.setData("text", event.target.id); dt.effectAllowed = "move"; }; } target1.ondragover = function(event) { var event = event || window.event; event.preventDefault(); }; target2.ondragover = function(event) { var event = event || window.event; event.preventDefault(); }; target3.ondragover = function(event) { var event = event || window.event; event.preventDefault(); }; target4.ondragover = function(event) { var event = event || window.event; event.preventDefault(); }; target1.ondrop = function(event) { var event = event || window.event; var dt = event.dataTransfer; event.preventDefault(); var data = dt.getData("text"); if (data === "item1" || data === "item2" || data === "item3" || data === "item4") { target1.appendChild(document.getElementById(data)); } }; target2.ondrop = function(event) { var event = event || window.event; var dt = event.dataTransfer; event.preventDefault(); var data = dt.getData("text"); if (data === "item5" || data === "item6" || data === "item7" || data === "item8") { target2.appendChild(document.getElementById(data)); } }; target3.ondrop = function(event) { var event = event || window.event; var dt = event.dataTransfer; event.preventDefault(); var data = dt.getData("text"); if (data === "item9" || data === "item10" || data === "item11" || data === "item12") { target3.appendChild(document.getElementById(data)); } }; target4.ondrop = function(event) { var event = event || window.event; var dt = event.dataTransfer; event.preventDefault(); var data = dt.getData("text"); if (data === "item13" || data === "item14" || data === "item15" || data === "item16" || data === "item17" || data === "item18" || data === "item19" || data === "item20" || data === "item21" || data === "item22" || data === "item23" || data === "item24" || data === "item25" || data === "item26" || data === "item27" || data === "item28" || data === "item29" || data === "item30" || data === "item31" || data === "item32" || data === "item33" || data === "item34" || data === "item35" || data === "item36" || data === "item37" || data === "item38" || data === "item39" || data === "item40" || data === "item41" || data === "item42" || data === "item43" || data === "item44" || data === "item45" || data === "item46" || data === "item47" || data === "item48" || data === "item49" || data === "item50" || data === "item51" || data === "item52" || data === "item53" || data === "item54" || data === "item55" || data === "item56" || data === "item57" || data === "item58" || data === "item59" || data === "item60") { target4.appendChild(document.getElementById(data)); } }; //}; Link to comment Share on other sites More sharing options...
aceuk007 Posted January 21, 2016 Author Share Posted January 21, 2016 john_jackI have tried it in jsfiddle and works But when I save it as a .html It does not work . I have no D&D or shuffle or number of items on page. Just does not make sense. I'm using IE11 (which is all it has to work in) put all the code on notepad, then save as " file name.html / type all files / encoding UTF-8" and nothing works. Any idea why that is. Link to comment Share on other sites More sharing options...
john_jack Posted January 21, 2016 Share Posted January 21, 2016 i just have IE8 it cannot even open JSfiddle :s i suggest you choose another browser IE is a Pain ..... here save it as .html and good luck <!DOCTYPE html> <html> <head> <script src="http://www.addressfinder.co.nz/assets/v2/widget.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <style> html { background-color: silver; font-family: times new roman; color: black; } header { background-color: black; color: yellow; text-align: center; padding: 5px; } nav { line-height: 20px; background-color: yellow; height: 625px; width: 100px; float: left; padding: 5px; } section { height: 220px; text-align: center; padding: 5px; } #fruit { width: 90px; height: 120px; left: 220px; top: 150px; padding: 10px; border: 2px solid green; position: absolute; } #veg { width: 90px; height: 120px; left: 370px; top: 150px; padding: 10px; border: 2px solid green; position: absolute; } #games { width: 90px; height: 120px; left: 520px; top: 150px; padding: 10px; border: 2px solid green; position: absolute; } #numbers { width: 90px; height: 120px; left: 670px; top: 150px; padding: 10px; border: 2px solid green; position: absolute; } #box2 { width: 90px; height: 120px; left: 820px; top: 150px; padding: 10px; border: 2px solid green; position: absolute; } #box3 { width: 90px; height: 120px; left: 970px; top: 150px; padding: 10px; border: 2px solid green; position: absolute; } #box4 { width: 90px; height: 120px; left: 1120px; top: 150px; padding: 10px; border: 2px solid green; position: absolute; } #box5 { width: 90px; height: 120px; left: 1270px; top: 150px; padding: 10px; border: 2px solid green; position: absolute; } #veg > * { display: none; } #fruit > * { display: none; } #games > * { display: none; } #numbers > * { display: none; } article { background-color: aqua; height: 395px; padding: 5px; } ul { margin: left; column-count: 6; column-gap: 20px; column-width: auto; text-align: left; } li { break-inside: avoid-column; overflow: hidden; list-style-type: none; padding: 5px; margin: 2px; background-color: #CCCCFF; border: 2px double #CCCCCC; } footer { background-color: black; color: white; text-align: center; padding: 5px; } </style> </head> <body> <header> <h1>FLOOR 1 W/S 1</h1> </header> <nav> <pre> <center><a href="Home.html"><b>HOME</b></a></center> <center><a href="GF.html"><b>Ground<br>Floor</b></a></center> <b>1st Floor</b> <a href="F1WS1.html">WS1</a> <a href="F1WS2.html">WS2</a> <a href="F1WS3.html">WS3</a> <b>2nd Floor</b> <a href="F2WS1.html">WS1</a> <a href="F2WS2.html">WS2</a> <a href="F2WS3.html">WS3</a> <b>3nd Floor</b> <a href="F3WS1.html">WS1</a> <a href="F3WS2.html">WS2</a> </pre> </nav> <section> <h1>Choose a Box</h1> <ul id="fruit">Fruit </ul> <ul id="veg">Veg </ul> <ul id="games">Games </ul> <ul id="numbers">Numbers </ul> <ul id="box2">Box2 </ul> <ul id="box3">Box3 </ul> <ul id="box4">Box4 </ul> <ul id="box5">Box5 </ul> </section> <article> <ul id="dragsource"> <li id="item1" draggable="true">Apple</li> <li id="item2" draggable="true">Banana</li> <li id="item3" draggable="true">Orange</li> <li id="item4" draggable="true">Pear</li> <li id="item5" draggable="true">Carrot</li> <li id="item6" draggable="true">Pea</li> <li id="item7" draggable="true">Potato</li> <li id="item8" draggable="true">Sprout</li> <li id="item9" draggable="true">Chess</li> <li id="item10" draggable="true">Dominos</li> <li id="item11" draggable="true">Monopoly</li> <li id="item12" draggable="true">Twister</li> <li id="item13" draggable="true">1</li> <li id="item14" draggable="true">2</li> <li id="item15" draggable="true">3</li> <li id="item16" draggable="true">4</li> <li id="item17" draggable="true">5</li> <li id="item18" draggable="true">6</li> <li id="item19" draggable="true">7</li> <li id="item20" draggable="true">8</li> <li id="item21" draggable="true">9</li> <li id="item22" draggable="true">10</li> <li id="item23" draggable="true">11</li> <li id="item24" draggable="true">12</li> <li id="item25" draggable="true">13</li> <li id="item26" draggable="true">14</li> <li id="item27" draggable="true">15</li> <li id="item28" draggable="true">16</li> <li id="item29" draggable="true">17</li> <li id="item30" draggable="true">18</li> <li id="item31" draggable="true">19</li> <li id="item32" draggable="true">20</li> <li id="item33" draggable="true">21</li> <li id="item34" draggable="true">22</li> <li id="item35" draggable="true">23</li> <li id="item36" draggable="true">24</li> <li id="item37" draggable="true">25</li> <li id="item38" draggable="true">26</li> <li id="item39" draggable="true">27</li> <li id="item40" draggable="true">28</li> <li id="item41" draggable="true">29</li> <li id="item42" draggable="true">30</li> <li id="item43" draggable="true">31</li> <li id="item44" draggable="true">32</li> <li id="item45" draggable="true">33</li> <li id="item46" draggable="true">34</li> <li id="item47" draggable="true">35</li> <li id="item48" draggable="true">36</li> <li id="item49" draggable="true">37</li> <li id="item50" draggable="true">38</li> <li id="item51" draggable="true">39</li> <li id="item52" draggable="true">40</li> <li id="item53" draggable="true">41</li> <li id="item54" draggable="true">42</li> <li id="item55" draggable="true">43</li> <li id="item56" draggable="true">44</li> <li id="item57" draggable="true">45</li> <li id="item58" draggable="true">46</li> <li id="item59" draggable="true">47</li> <li id="item60" draggable="true">48</li> </ul> </article> <footer> Copyright © Aceuk007.com </footer> <!-- VISUALIZZARE LA TEMP --> <script> //shuffleList(); function shuffleList() { var origList = $("#dragsource li").detach(); var newList = origList.clone(); for (var i = 0; i < newList.length; i++) { var randomIndex = randomInt(newList.length - i); newList[i] = origList.splice(randomIndex, 1); $("#dragsource").append(newList[i]); } alert("newlist = "+ newList.length +"original list"+ origList.length); } function randomInt(maxNum) { return Math.floor(Math.random() * maxNum); } $(document).ready(function() { var $lis = $("#dragsource li").hide(); $lis.slice(0, 18).show(); var size_li = $lis.length; }); //window.onload = function() { var target1 = document.getElementById("fruit"); var target2 = document.getElementById("veg"); var target3 = document.getElementById("games"); var target4 = document.getElementById("numbers"); var list = document.querySelectorAll("#dragsource li"); for (i = 0; i < list.length; i++) { list[i].draggable = true; list[i].ondragstart = function(event) { var event = event || window.event; var dt = event.dataTransfer; dt.setData("text", event.target.id); dt.effectAllowed = "move"; }; } target1.ondragover = function(event) { var event = event || window.event; event.preventDefault(); }; target2.ondragover = function(event) { var event = event || window.event; event.preventDefault(); }; target3.ondragover = function(event) { var event = event || window.event; event.preventDefault(); }; target4.ondragover = function(event) { var event = event || window.event; event.preventDefault(); }; target1.ondrop = function(event) { var event = event || window.event; var dt = event.dataTransfer; event.preventDefault(); var data = dt.getData("text"); if (data === "item1" || data === "item2" || data === "item3" || data === "item4") { target1.appendChild(document.getElementById(data)); } }; target2.ondrop = function(event) { var event = event || window.event; var dt = event.dataTransfer; event.preventDefault(); var data = dt.getData("text"); if (data === "item5" || data === "item6" || data === "item7" || data === "item8") { target2.appendChild(document.getElementById(data)); } }; target3.ondrop = function(event) { var event = event || window.event; var dt = event.dataTransfer; event.preventDefault(); var data = dt.getData("text"); if (data === "item9" || data === "item10" || data === "item11" || data === "item12") { target3.appendChild(document.getElementById(data)); } }; target4.ondrop = function(event) { var event = event || window.event; var dt = event.dataTransfer; event.preventDefault(); var data = dt.getData("text"); if (data === "item13" || data === "item14" || data === "item15" || data === "item16" || data === "item17" || data === "item18" || data === "item19" || data === "item20" || data === "item21" || data === "item22" || data === "item23" || data === "item24" || data === "item25" || data === "item26" || data === "item27" || data === "item28" || data === "item29" || data === "item30" || data === "item31" || data === "item32" || data === "item33" || data === "item34" || data === "item35" || data === "item36" || data === "item37" || data === "item38" || data === "item39" || data === "item40" || data === "item41" || data === "item42" || data === "item43" || data === "item44" || data === "item45" || data === "item46" || data === "item47" || data === "item48" || data === "item49" || data === "item50" || data === "item51" || data === "item52" || data === "item53" || data === "item54" || data === "item55" || data === "item56" || data === "item57" || data === "item58" || data === "item59" || data === "item60") { target4.appendChild(document.getElementById(data)); } }; //};</script> <!-- pagina principale --> </body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted January 21, 2016 Share Posted January 21, 2016 (edited) Your JavaScript settings in jsfiddle are wrong! you don't want to use 'onload', just 'wrap in head'. What it is doing is wrapping all your current code in a window.onload function, and because of this, the jquery onload and windows onload will not work, because the onload event has already passed, the reason john_jack code works is because he has placed JavaScript/jquery after the targeted elements, so they already exist, and so the code will work. I don't see why you are using both Jquery and JavaScript onload equivalents? http://jsfiddle.net/W4Km8/8662/ Edited January 21, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
aceuk007 Posted January 22, 2016 Author Share Posted January 22, 2016 john_jack - Thank you for your effort . It just won't work when I save it. I'll have to look for a jscript to do what the jquery bit is doing. It all worked fine until I added the jquery. It has to work on IE11 as this is what we have on the laptop. It was just going to be a training tool to use in the post room.Sub the drop point name for dept and items would be names .dsonesuk - You my not have seen my earlier post but I should explain that I have almost no understanding of this. I have got this far by finding bits of code for what I want to do. I used the jquery as I could not find jscript to do what i wanted. I Checked you jsfiddle Shuffle not working and dropped item still visible when dropped , but thank you for trying Link to comment Share on other sites More sharing options...
dsonesuk Posted January 23, 2016 Share Posted January 23, 2016 I was just correcting you on how the code you are using should be used! it was not a solution to what you want, which! from what i understand (I think) is, you want the dropped items in the box to be hidden. IF so, you first! have to produce valid html, you have a text description within ul tag when it should be within li if you plan to use an ul. You could then either use css to hide dropped li by targeting any li tags placed in ul other than the first child li, OR JavaScript/jquery to target li elements with index greater than 0. Link to comment Share on other sites More sharing options...
aceuk007 Posted January 25, 2016 Author Share Posted January 25, 2016 dsonesuk - I have code in css (see editted #1). Again this worked perfectly before . Link to comment Share on other sites More sharing options...
dsonesuk Posted January 25, 2016 Share Posted January 25, 2016 Follow my suggestion in post #8,. move shuffleList(); in to $(document).ready(function() { }); Having shuffleList() triggered before the elements have even been rendered will cause it to fail to shuffle, placing in $(document).ready(function() { }); which acts like window.onload will cause it to run AFTER these elements are rendered fully. The reason it is not working with your current css code to hide these elements using display: none; is because $lis.slice(0, 18).show(); will add inline styling of display: list-item; this being an inline styling it has higher precedence over css code using display: none; UNLESS you place !important AFTER display: none; as in display: none !important; OR target this element AFTER being dropped to change inline style attribute from style="display: list-item" to style="display: none", OR just remove style attribute completely; var $lis = $("#dragsource li").hide(); ///will hide all li elements with style="display: none;" $lis.slice(0, 12).removeAttr("style"); //will remove style="display: none;" completely causing them to be seen again, meaning no higher inline precedence problem, meaning css will now work! Link to comment Share on other sites More sharing options...
aceuk007 Posted January 25, 2016 Author Share Posted January 25, 2016 dsonesuk - Thanks for reply . I am at work so hope to look over this tonight.Cheers Link to comment Share on other sites More sharing options...
aceuk007 Posted January 25, 2016 Author Share Posted January 25, 2016 dsonesuk - Cheers adding !important; did the trick. but using $(document).ready(function() { }); instead off shuffleList(); stopped D&D , shuffle working..Still everthing is ok now thanks for your help. Nearly at the end off my project. Cheers Link to comment Share on other sites More sharing options...
dsonesuk Posted January 25, 2016 Share Posted January 25, 2016 I did not say use instead of, I said place IN THE $(document).ready(function() { }); making it the first thing that is run after page has fully loaded AND YOU FOLLOWED INSTRUCTION FROM post #8, if you look at source of jsfiddle, and see window.onload on the first line it still wrong! And you should correct HTML as mentioned in post #10. Link to comment Share on other sites More sharing options...
aceuk007 Posted January 26, 2016 Author Share Posted January 26, 2016 (edited) dsonesuk - So put it like this $(document).ready(function() { }); shuffleList(); With the correct HTML do you mean I currently have <ul id="dragsource"> <li id="item1" draggable="true">Apple</li> when it should be <li id="dragsource1" draggable="true">Apple</li> Have Got this right One other thing Do you have any idea why these solutions work in fiddle but not when I save as .HTML Edited January 26, 2016 by aceuk007 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 26, 2016 Share Posted January 26, 2016 1: document ready -> no! , almost gave you yes $(document).ready(function() { }); red = opening, green = closing shuffleList(); therefore THIS IS NOT WITHIN $(document).ready 2: invalid html, these within the section element <ul id="fruit">Fruit</ul> and the others, should be as <ul id="fruit"> <li>Fruit</li></ul> the css can be one line section ul li:first-child ~ li {display: none !important;} also change ul { /*margin: left; what????? */ column-count: 6; column-gap: 20px; column-width: auto; text-align: left; } to ul#dragsource { /*margin: left; what????? */ column-count: 6; column-gap: 20px; column-width: auto; text-align: left; } You really need to use additional class name for section ul, it will save lot of work duplicating same styling for each ul using id ref, you would only add styling to these that is unique to this id like the left: properties. 3: I don't know? I don't know if you are loading proper jquery library files?, where you have placed them?, what browser you are using?, as your column-count css styling will only work for some modern browser, with the others you have to use browser prefix such as -moz-column-count: 6; for firefox, -webkit-column-count: 6; for chrome, safari. jsfiidle in most cases will know where to place, what jquery to use, and work with no problems (as long as you ensure the settings are corrrect), because css, js html etc are broken up into individual areas to place a specific code. Link to comment Share on other sites More sharing options...
aceuk007 Posted January 27, 2016 Author Share Posted January 27, 2016 dsonesuk - Thank you for your effort. I will be away for a few days very busy house moving my daughter.Just thought I'd let you know as I did not want you to think I just have not bothered to reply. I have corrected this <ul id="fruit">Fruit</ul> to <ul id="fruit"> <li>Fruit</li></ul> Also Have done this section ul li:first-child ~ li {display: none !important;} removing(all of them) #veg > * { display: none; } Plus added this ul#dragsource { /*margin: left; what????? */column-count: 6;column-gap: 20px;column-width: auto;text-align: left;} So what is happening is there is only one item on display to drag into target area. when you drag item into box the next item on list shows. Re 3. I only have to get it working in IE11. I have added the following <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://www.addressfinder.co.nz/assets/v2/widget.js"></script> This gives me correct number of items on page but no shuffle or drag & drop. Re 1. Sorry but I can't see a difference between $(document).ready(function() { }); shuffleList(); and what you put $(document).ready(function() { }); shuffleList(); Or should I not include shuffleList(); Once again thanks for you time Link to comment Share on other sites More sharing options...
thescientist Posted January 28, 2016 Share Posted January 28, 2016 look at what he said. you have to put shuffleList IN the document.ready callback function. Like this $(document).ready(function() { shuffleList(); }); Here's the jQuery documentation for ready, there are a bunch of examples. https://api.jquery.com/ready/ Link to comment Share on other sites More sharing options...
aceuk007 Posted February 4, 2016 Author Share Posted February 4, 2016 dsonesuk - Thank you for your help got there in the end. thescientist - thank you for putting in my language ( Basic) Link to comment Share on other sites More sharing options...
dsonesuk Posted February 4, 2016 Share Posted February 4, 2016 Dsonesuk = basic, using colour coded with explaination, if you bother to actually read and understand. Thescientist = just give you answer without you working it out for yourself, learning nout. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now