logo标签列表

显示不正确（可能是负边距）？

javascripthtmlcssjscript
5

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>

你好，当有一些拖拽的项目被放置后，我遇到了一个问题，会出现这种效果（见图片）。 查看 我认为可能与（负）边距有关，但我不知道如何解决。这只需要在IE上工作。

image

我的 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;
}

这里有一个 jsfiddle 错误的显示

。

你可以通过在要筛选的项目上使用CSS类来简化你的JavaScript代码。 - Arnaud Gueras
@ArnaudGueras 是的，你说得对，但我真的不会编程。我搜索我想要的代码并试着玩弄它以达到我的目的（再加上一些帮助）。所以我不会知道怎么做。干杯 - aceuk007
@Deepak Yadav，感谢您的尝试，但问题还未解决。 - aceuk007
1个回答
1
使用break-inside: avoid-column在li上，像这样：
li {
  break-inside: avoid-column;
  list-style-type: none;
  padding: 5px;
  margin: 2px;
  background-color: #CCCCFF;
  border: 2px double #CCCCCC;
}

固定 jsfiddle: https://jsfiddle.net/3jv06kcw/1/

注意：截至2015年12月，此CSS属性仅在IE中受支持（根据问题，这是可以的）。对于WebKit，您可以使用：-webkit-column-break-inside：avoid;。但是，不同浏览器之间的结果内容分配可能略有不同。我猜未解决的问题像这样是为什么多列在许多情况下仍然落后于供应商前缀的原因。

几乎完美。拖放所有项目并且显示正常，直到只剩一行，然后屏幕会出现损坏。有什么解决方法吗？谢谢 - aceuk007
为了解决这个问题，您可以将 break-inside: avoid-column 替换(或添加到) li 上，并使用 overflow: hidden。这将建立一个块级格式化上下文，以改变换行行为。 这将在 IE 中修复它，但我认为这可能是非标准的、仅限于 IE 的逻辑引起的，因此不能保证在其他浏览器甚至未来的 IE 中继续工作。 - Daniel S.
加上这个可以解决问题。我发现替换并不能解决问题，因为第一个块的第一行有问题。再次感谢您的帮助。 - aceuk007
希望你不介意，因为你之前非常有帮助，如果你有时间，能否看一下我的新帖子。我问这个问题是因为我还没有收到任何回复。这是链接 - http://stackoverflow.com/questions/34653635/shuffle-display-items-from-list 谢谢。 - aceuk007
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接