Display errato (margini forse negativi)?

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>

Ciao ho un problema quando alcuni elementi sono stati trascinati caduto, ottengo questo effetto (vedi foto). Penso che potrebbe essere qualcosa a che fare con (negativo) -margins ma non so come risolverlo. Questo deve funzionare solo su IE.

mioCSS

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

Ecco un jsfiddle incorrect display

fonte

2015-12-24 aceuk007

Si potrebbe semplificare javascript così tanto usando la classe CSS sull'elemento che si desidera filtrare. –

@ArnaudGueras si hai ragione, ma io davvero non conosco la codifica. Ho cercato il codice che volevo e ho giocato con esso per arrivare dove sono (più un aiuto). Quindi non saprei come. Cheers – aceuk007

@Deepak Yadav Grazie per aver provato ma non ha risolto il problema – aceuk007

Usa break-inside: avoid-column su li, in questo modo:

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

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

Nota: questa proprietà CSS è supportata solo in IE al dic 2015 (che, secondo la domanda, è bene). Per il webkit, è possibile utilizzare: -webkit-column-break-inside: avoid;. Tuttavia, la distribuzione del contenuto risultante potrebbe essere leggermente diversa tra i browser. Sto indovinando cose irrisolte come questa è la ragione per cui in molti casi è ancora dietro ai prefissi dei fornitori multicanalità.

fonte

2015-12-24 12:16:21

Quasi perfetto. Trascinato e rimosso tutti gli elementi e il display andava bene fino a quando non c'era solo una riga, quindi la visualizzazione era corrotta. Qualche idea su come risolvere questo. Cheers – aceuk007

Per risolvere questo problema, puoi sostituire (o aggiungere a) 'break-inside: avoid-column' con' overflow: hidden' su 'li' (questo stabilirà un contesto di formattazione dei blocchi che cambierà il comportamento di rottura). Questo lo risolverà in IE, ma credo che possa essere dovuto a una logica non standard, specifica per IE, quindi non è garantito che continui a funzionare in altri browser o persino in IE in futuro. –

aggiungendo questo risolve il problema. Ho scoperto che la sostituzione non lo risolveva perché c'era un problema sulla linea 1 del primo blocco. ancora una volta grazie per il tuo aiuto. – aceuk007

Display errato (margini forse negativi)?

risposta

Problemi correlati