Incorrect display( negative margins maybe)?

Question

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));
    }
  };

};

html {
  background-color: silver;
  font-family: sans-serif;
  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: 520px;
  top: 150px;
  padding: 10px;
  border: 2px solid green;
  position: absolute;
}
#veg {
  width: 90px;
  height: 120px;
  left: 670px;
  top: 150px;
  padding: 10px;
  border: 2px solid green;
  position: absolute;
}
#games {
  width: 90px;
  height: 120px;
  left: 820px;
  top: 150px;
  padding: 10px;
  border: 2px solid green;
  position: absolute;
}
#numbers {
  width: 90px;
  height: 120px;
  left: 970px;
  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 {
  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;
}

<header>
  <h1>FLOOR 1 W/S 3</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>

</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>

Hi i have a problem when some dragged items have been dropped, I get this effect (see pic). display I think it might be something to do with (negative)-margins but I don't know how to solve it. This only has to work on IE.

My CSS

article {
  background-color: aqua;
  height: 395px;
  padding: 5px;
}

ul {
  margin: left;
  column-count: 6;
  column-gap: 20px;
  column-width: auto;
  text-align: left;
}

li {
  list-style-type: none;
  padding: 5px;
  margin: 2px;
  background-color: #CCCCFF;
  border: 2px double #CCCCCC;
}

Here is a jsfiddle incorrect display

You could simplify you javascript sooooooo much by using css class on item you want to filter — Arnaud Gueras, Dec 24 '15 at 12:37
@ArnaudGueras yes you are right ,but I really do not know coding. I seach for code that I wanted and played with it to get where I am (plus some help). So I would not know how to. Cheers — aceuk007, Dec 24 '15 at 12:48

Daniel S. · Accepted Answer · 2015-12-24T12:33:55.397

1

Use break-inside: avoid-column on li, like so:

li {
  break-inside: avoid-column;
  list-style-type: none;
  padding: 5px;
  margin: 2px;
  background-color: #CCCCFF;
  border: 2px double #CCCCCC;
}

fixed jsfiddle: https://jsfiddle.net/3jv06kcw/1/

Note: this CSS property is supported only in IE as of Dec 2015 (which, according to the question, is fine). For webkit, you can use: -webkit-column-break-inside: avoid; instead. However, the resulting content distribution may be slightly different among browsers. I'm guessing unresolved stuff like this is the reason why multicolumn is still behind vendor prefixes in many cases.

edited Dec 24 '15 at 12:33

answered Dec 24 '15 at 12:16

Daniel S.

3,494
24
30

Almost perfect. Dragged & Dropped all items and display was fine until there was just 1 line, then display was corrupted. Any ideas on solving this . Cheers – aceuk007 Dec 24 '15 at 12:39
To fix this, you can replace (or add to) `break-inside: avoid-column` with `overflow: hidden` on `li` (this will establish a block formatting context that will change breaking behavior). This will fix it in IE, but I believe it may be due to non-standard, IE-specific logic, so it is not guaranteed to continue working in other browsers or even in IE in the future. – Daniel S. Dec 24 '15 at 21:11
adding this solves the problem. I found that replacing did not solve it as there was a problem on line 1 the first block. once again thank you for your help. – aceuk007 Dec 26 '15 at 09:12
Hope you don't mind as you were so helpful on this would you mind looking at my new post if you have time. I ask as I have not had any replies. It is here - http://stackoverflow.com/questions/34653635/shuffle-display-items-from-list Thanks – aceuk007 Jan 08 '16 at 11:00

Incorrect display( negative margins maybe)?

1 Answers1