Pro výukové účely na SPŠ Zlín
vytvořil RNDr.Vladimír Vaščák

Drag and Drop

    <script>  
        <link rel=stylesheet type="text/css" href="DragAndDrop.css">
        <script src="DragAndDrop.js"></script>
        <script src="rozmeryObrazovky.js"></script> 
        window.onload = function () {
            dragElement(document.getElementById("mydiv1"));
            dragElement(document.getElementById("mydiv2"));
        }
        function zmenPozici(div, pozice) {
          document.getElementById(div).style.zIndex = pozice; 
        }
        function klikIkona(ktery, co) {
          var div = document.getElementById("mydiv" + ktery);
          var telo = document.getElementById("telo" + ktery); 
          if (co == "0") {    
            telo.style.display = "none";
            div.style.top = (vyskaObrazovky - 36) + "px";
          } else if (co == "1") {
            telo.style.display = "none";
          }  else if (co == "2") {
            telo.style.display = "inline";
            div.style.top = (10) + "px";
         
          }
        }                  
    </script> 
  
    <div id="mydiv1" onMouseOver="zmenPozici('mydiv1', 101)" onMouseOut="zmenPozici('mydiv1', 100)">
      <div id="mydiv1hlavicka">
          <div class="ikony">  
              <img onClick="klikIkona(1, 0)" src="img/red.png" class="ikona" />
              <img onClick="klikIkona(1, 1)" src="img/yellow.png" class="ikona" />
              <img onClick="klikIkona(1, 2)" src="img/green.png" class="ikona" />
          </div>    
          <div class="nadpis">Sheldon Cooper</div>  
      </div>
      <div id="telo1">
        <img src="img/sheldon.jpg" />
      </div>  
    </div>
    
    <div id="mydiv2" onMouseOver="zmenPozici('mydiv2', 101)" onMouseOut="zmenPozici('mydiv2', 100)">
      <div id="mydiv2hlavicka">
        <div class="nadpis">Missy Cooper</div>  
      </div>
      <div id="telo2">
        <img src="img/missy.jpg" />
      </div>  
    </div>
  

Sheldon Cooper
Missy Cooper