Jump to content

Drag & Drop won't work since New code added


Recommended Posts

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 by aceuk007
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites
john_jack

I 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 post
Share on other sites

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 post
Share on other sites

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 by dsonesuk
Link to post
Share on other sites

 

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 by aceuk007
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...