2.5.7 - Drag and drop mozdulatok

<!-- Jó: Csúszka húzással és gombokkal is működtethető -->
<div class="hangerő-vezérlo">
  <label for="hangerő-csuszka">Hangerő beállítása</label>
  
  <div class="csuszka-container">
    <button id="hangerő-csokkentes" 
            aria-label="Hangerő csökkentése"
            class="csuszka-gomb">
      🔉 -
    </button>
    
    <div class="csuszka-track">
      <input type="range" 
             id="hangerő-csuszka"
             role="slider"
             aria-valuemin="0" 
             aria-valuemax="100" 
             aria-valuenow="50"
             aria-describedby="hangerő-ertekek"
             class="csuszka-input">
      <div class="csuszka-jelolések">
        <span>0</span>
        <span>25</span>
        <span>50</span>
        <span>75</span>
        <span>100</span>
      </div>
    </div>
    
    <button id="hangerő-novelés" 
            aria-label="Hangerő növelése"
            class="csuszka-gomb">
      🔊 +
    </button>
  </div>
  
  <div id="hangerő-ertekek" class="ertek-kijelzés">
    Jelenlegi hangerő: <span id="hangerő-szam">50</span>%
  </div>
  
  <div class="gyors-beallitasok">
    <button onclick="hangerőBeallitas(0)" class="gyors-gomb">🔇 Némítás</button>
    <button onclick="hangerőBeallitas(25)" class="gyors-gomb">Alacsony</button>
    <button onclick="hangerőBeallitas(50)" class="gyors-gomb">Közepes</button>
    <button onclick="hangerőBeallitas(75)" class="gyors-gomb">Magas</button>
    <button onclick="hangerőBeallitas(100)" class="gyors-gomb">Maximum</button>
  </div>
</div>

<style>
.hangerő-vezérlo {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

.csuszka-container {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 15px 0;
}

.csuszka-gomb {
  padding: 10px 15px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  min-width: 60px;
}

.csuszka-gomb:hover {
  background: #0056b3;
}

.csuszka-gomb:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

.csuszka-track {
  flex: 1;
  position: relative;
}

.csuszka-input {
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.csuszka-input::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
}

.csuszka-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.csuszka-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

.csuszka-jelolések {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 12px;
  color: #666;
}

.ertek-kijelzés {
  text-align: center;
  font-weight: bold;
  margin: 15px 0;
  padding: 10px;
  background: #e7f3ff;
  border-radius: 4px;
}

.gyors-beallitasok {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 15px;
  flex-wrap: wrap;
}

.gyors-gomb {
  padding: 8px 12px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.gyors-gomb:hover {
  background: #218838;
}

.gyors-gomb:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}
</style>

<script>
const hangerőCsuszka = document.getElementById('hangerő-csuszka');
const hangerőSzam = document.getElementById('hangerő-szam');
const csökkentésGomb = document.getElementById('hangerő-csokkentes');
const növelésGomb = document.getElementById('hangerő-novelés');

// Csúszka értékének frissítése
function hangerőFrissités() {
  const ertek = hangerőCsuszka.value;
  hangerőSzam.textContent = ertek;
  hangerőCsuszka.setAttribute('aria-valuenow', ertek);
  
  // Vizuális visszajelzés
  const szazalek = (ertek / 100) * 100;
  hangerőCsuszka.style.background = 
    `linear-gradient(to right, #007bff 0%, #007bff ${szazalek}%, #ddd ${szazalek}%, #ddd 100%)`;
}

// Csúszka eseménykezelők
hangerőCsuszka.addEventListener('input', hangerőFrissités);
hangerőCsuszka.addEventListener('change', hangerőFrissités);

// Gomb vezérlők
csökkentésGomb.addEventListener('click', function() {
  let jelenlegiErtek = parseInt(hangerőCsuszka.value);
  let ujErtek = Math.max(0, jelenlegiErtek - 5);
  hangerőCsuszka.value = ujErtek;
  hangerőFrissités();
  
  // Vizuális visszajelzés
  this.style.background = '#28a745';
  setTimeout(() => {
    this.style.background = '#007bff';
  }, 150);
});

növelésGomb.addEventListener('click', function() {
  let jelenlegiErtek = parseInt(hangerőCsuszka.value);
  let ujErtek = Math.min(100, jelenlegiErtek + 5);
  hangerőCsuszka.value = ujErtek;
  hangerőFrissités();
  
  // Vizuális visszajelzés
  this.style.background = '#28a745';
  setTimeout(() => {
    this.style.background = '#007bff';
  }, 150);
});

// Gyors beállítások funkciója
function hangerőBeallitas(ertek) {
  hangerőCsuszka.value = ertek;
  hangerőFrissités();
}

// Billentyűzet támogatás a csúszkához
hangerőCsuszka.addEventListener('keydown', function(e) {
  let jelenlegiErtek = parseInt(this.value);
  let ujErtek = jelenlegiErtek;
  
  switch(e.key) {
    case 'ArrowLeft':
    case 'ArrowDown':
      e.preventDefault();
      ujErtek = Math.max(0, jelenlegiErtek - 5);
      break;
    case 'ArrowRight':
    case 'ArrowUp':
      e.preventDefault();
      ujErtek = Math.min(100, jelenlegiErtek + 5);
      break;
    case 'Home':
      e.preventDefault();
      ujErtek = 0;
      break;
    case 'End':
      e.preventDefault();
      ujErtek = 100;
      break;
    case 'PageDown':
      e.preventDefault();
      ujErtek = Math.max(0, jelenlegiErtek - 10);
      break;
    case 'PageUp':
      e.preventDefault();
      ujErtek = Math.min(100, jelenlegiErtek + 10);
      break;
  }
  
  if (ujErtek !== jelenlegiErtek) {
    this.value = ujErtek;
    hangerőFrissités();
  }
});

// Kezdeti állapot beállítása
document.addEventListener('DOMContentLoaded', function() {
  hangerőFrissités();
});
</script>

<!-- Jó: Lista átrendezése húzással és billentyűzettel -->
<div class="teendok-lista-container">
  <h2>Teendők lista - átrendezhető</h2>
  
  <div class="vezerlesi-utasitasok">
    <p><strong>Átrendezési módok:</strong></p>
    <ul>
      <li>🖱️ Húzd az elemeket új pozícióba

<!-- Jó: Panel átméretezése húzással és gombokkal -->
<div class="atmeretezheto-container">
  <div class="panel-fejlec">
    <h2>Átméretezhető tartalom panel</h2>
    <div class="meretezesi-vezerlok">
      <button id="szelesseg-csokkentes" 
              aria-label="Panel szélességének csökkentése"
              class="meretezesi-gomb">
        ↔️ -
      </button>
      <span class="meret-kijelzes" id="szelesseg-ertek">400px</span>
      <button id="szelesseg-noveles" 
              aria-label="Panel szélességének növelése"
              class="meretezesi-gomb">
        ↔️ +
      </button>
      
      <button id="magassag-csokkentes" 
              aria-label="Panel magasságának csökkentése"
              class="meretezesi-gomb">
        ↕️ -
      </button>
      <span class="meret-kijelzes" id="magassag-ertek">300px</span>
      <button id="magassag-noveles" 
              aria-label="Panel magasságának növelése"
              class="meretezesi-gomb">
        ↕️ +
      </button>
    </div>
  </div>
  
  <div id="atmeretezheto-panel" 
       class="atmeretezheto-panel"
       role="region"
       aria-label="Átméretezhető tartalom panel"
       tabindex="0"
       aria-describedby="panel-utasitasok">
    
    <div class="panel-tartalom">
      <h3>Panel tartalom</h3>
      <p>Ez a panel átméretezhető többféle módon:</p>
      <ul>
        <li>Húzd a sarkokat vagy oldalakat</li>
        <li>Használd a fejlécben lévő gombokat</li>
        <li>Billentyűzet: fókuszáld a panelt, majd Ctrl + nyíl billentyűk</li>
      </ul>
      <p>A tartalom automatikusan alkalmazkodik a panel méretéhez.</p>
    </div>
    
    <!-- Átméretezési fogások -->
    <div class="atmeretezesi-fogas top-left" 
         data-irany="nw" 
         aria-label="Panel átméretezése bal felső sarokból"
         tabindex="0"></div>
    <div class="atmeretezesi-fogas top-right" 
         data-irany="ne" 
         aria-label="Panel átméretezése jobb felső sarokból"
         tabindex="0"></div>
    <div class="atmeretezesi-fogas bottom-left" 
         data-irany="sw" 
         aria-label="Panel átméretezése bal alsó sarokból"
         tabindex="0"></div>
    <div class="atmeretezesi-fogas bottom-right" 
         data-irany="se" 
         aria-label="Panel átméretezése jobb alsó sarokból"
         tabindex="0"></div>
    <div class="atmeretezesi-fogas right" 
         data-irany="e" 
         aria-label="Panel szélességének állítása"
         tabindex="0"></div>
    <div class="atmeretezesi-fogas bottom" 
         data-irany="s" 
         aria-label="Panel magasságának állítása"
         tabindex="0"></div>
  </div>
  
  <div id="panel-utasitasok" class="utasitasok-szoveg">
    Átméretezés: Húzd a széleket/sarkokat, vagy használd a gombokat. Billentyűzet: Ctrl + nyíl billentyűk.
  </div>
  
  <div class="gyors-meretek">
    <h4>Gyors méretek:</h4>
    <button onclick="panelMeret(300, 200)" class="gyors-meret-gomb">Kicsi</button>
    <button onclick="panelMeret(400, 300)" class="gyors-meret-gomb">Közepes</button>
    <button onclick="panelMeret(600, 400)" class="gyors-meret-gomb">Nagy</button>
    <button onclick="panelMeret(800, 500)" class="gyors-meret-gomb">Extra nagy</button>
  </div>
</div>

<style>
.atmeretezheto-container {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.panel-fejlec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.meretezesi-vezerlok {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.meretezesi-gomb {
  padding: 8px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  min-width: 40px;
}

.meretezesi-gomb:hover {
  background: #0056b3;
}

.meretezesi-gomb:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

.meret-kijelzes {
  padding: 5px 10px;
  background: #e9ecef;
  border-radius: 3px;
  font-weight: bold;
  font-size: 12px;
  min-width: 60px;
  text-align: center;
}

.atmeretezheto-panel {
  position: relative;
  width: 400px;
  height: 300px;
  background: white;
  border: 2px solid #007bff;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
  resize: both;
}

.atmeretezheto-panel:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

.panel-tartalom {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.atmeretezesi-fogas {
  position: absolute;
  background: #007bff;
  cursor: pointer;
}

.atmeretezesi-fogas:hover {
  background: #0056b3;
}

.atmeretezesi-fogas:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
  background: #0056b3;
}

/* Sarok fogások */
.top-left, .top-right, .bottom-left, .bottom-right {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.top-left {
  top: -6px;
  left: -6px;
  cursor: nw-resize;
}

.top-right {
  top: -6px;
  right: -6px;
  cursor: ne-resize;
}

.bottom-left {
  bottom: -6px;
  left: -6px;
  cursor: sw-resize;
}

.bottom-right {
  bottom: -6px;
  right: -6px;
  cursor: se-resize;
}

/* Oldal fogások */
.right {
  top: 50%;
  right: -4px;
  width: 8px;
  height: 40px;
  transform: translateY(-50%);
  cursor: e-resize;
  border-radius: 4px;
}

.bottom {
  bottom: -4px;
  left: 50%;
  width: 40px;
  height: 8px;
  transform: translateX(-50%);
  cursor: s-resize;
  border-radius: 4px;
}

.utasitasok-szoveg {
  margin: 15px 0;
  padding: 10px;
  background: #e7f3ff;
  border-radius: 4px;
  font-size: 14px;
  color: #0066cc;
}

.gyors-meretek {
  margin-top: 20px;
  text-align: center;
}

.gyors-meretek h4 {
  margin-bottom: 10px;
}

.gyors-meret-gomb {
  padding: 8px 16px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 5px;
  font-size: 14px;
}

.gyors-meret-gomb:hover {
  background: #218838;
}

.gyors-meret-gomb:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}
</style>

<script>
const panel = document.getElementById('atmeretezheto-panel');
const szelessegErtek = document.getElementById('szelesseg-ertek');
const magassagErtek = document.getElementById('magassag-ertek');

let jelenlegiSzelesseg = 400;
let jelenlegiMagassag = 300;
let huzasAktiv = false;
let huzasSajan = null;

// Gomb vezérlők
document.getElementById('szelesseg-csokkentes').addEventListener('click', () => {
  jelenlegiSzelesseg = Math.max(200, jelenlegiSzelesseg - 20);
  panelMeretFrissites();
});

document.getElementById('szelesseg-noveles').addEventListener('click', () => {
  jelenlegiSzelesseg = Math.min(800, jelenlegiSzelesseg + 20);
  panelMeretFrissites();
});

document.getElementById('magassag-csokkentes').addEventListener('click', () => {
  jelenlegiMagassag = Math.max(150, jelenlegiMagassag - 20);
  panelMeretFrissites();
});

document.getElementById('magassag-noveles').addEventListener('click', () => {
  jelenlegiMagassag = Math.min(600, jelenlegiMagassag + 20);
  panelMeretFrissites();
});

// Panel méret frissítése
function panelMeretFrissites() {
  panel.style.width = jelenlegiSzelesseg + 'px';
  panel.style.height = jelenlegiMagassag + 'px';
  szelessegErtek.textContent = jelenlegiSzelesseg + 'px';
  magassagErtek.textContent = jelenlegiMagassag + 'px';
}

// Gyors méret beállítás
function panelMeret(szelesseg, magassag) {
  jelenlegiSzelesseg = szelesseg;
  jelenlegiMagassag = magassag;
  panelMeretFrissites();
}

// Húzási eseménykezelők a fogásokhoz
document.querySelectorAll('.atmeretezesi-fogas').forEach(fogas => {
  fogas.addEventListener('mousedown', huzasKezdet);
  fogas.addEventListener('keydown', billentyuzetesAtmeretez);
});

function huzasKezdet(e) {
  huzasAktiv = true;
  huzasSajan = e.target.getAttribute('data-irany');
  
  document.addEventListener('mousemove', huzasMozgas);
  document.addEventListener('mouseup', huzasVege);
  
  e.preventDefault();
}

function huzasMozgas(e) {
  if (!huzasAktiv) return;
  
  const rect = panel.getBoundingClientRect();
  
  switch(huzasSajan) {
    case 'se': // jobb alsó sarok
      jelenlegiSzelesseg = Math.max(200, e.clientX - rect.left);
      jelenlegiMagassag = Math.max(150, e.clientY - rect.top);
      break;
    case 'e': // jobb oldal
      jelenlegiSzelesseg = Math.max(200, e.clientX - rect.left);
      break;
    case 's': // alsó oldal
      jelenlegiMagassag = Math.max(150, e.clientY - rect.top);
      break;
  }
  
  panelMeretFrissites();
}

function huzasVege() {
  huzasAktiv = false;
  huzasSajan = null;
  document.removeEventListener('mousemove', huzasMozgas);
  document.removeEventListener('mouseup', huzasVege);
}

// Billentyűzetes átméretezés a fogásoknál
function billentyuzetesAtmeretez(e) {
  const irany = e.target.getAttribute('data-irany');
  let lepesek = e.shiftKey ? 5 : 1;
  
  switch(e.key) {
    case 'ArrowRight':
      e.preventDefault();
      if (irany.includes('e')) {
        jelenlegiSzelesseg = Math.min(800, jelenlegiSzelesseg + (10 * lepesek));
        panelMeretFrissites();
      }
      break;
    case 'ArrowLeft':
      e.preventDefault();
      if (irany.includes('e')) {
        jelenlegiSzelesseg = Math.max(200, jelenlegiSzelesseg - (10 * lepesek));
        panelMeretFrissites();
      }
      break;
    case 'ArrowDown':
      e.preventDefault();
      if (irany.includes('s')) {
        jelenlegiMagassag = Math.min(600, jelenlegiMagassag + (10 * lepesek));
        panelMeretFrissites();
      }
      break;
    case 'ArrowUp':
      e.preventDefault();
      if (irany.includes('s')) {
        jelenlegiMagassag = Math.max(150, jelenlegiMagassag - (10 * lepesek));
        panelMeretFrissites();
      }
      break;
  }
}

// Panel billentyűzetes átméretezése
panel.addEventListener('keydown', function(e) {
  if (e.ctrlKey) {
    let lepesek = e.shiftKey ? 5 : 1;
    
    switch(e.key) {
      case 'ArrowRight':
        e.preventDefault();
        jelenlegiSzelesseg = Math.min(800, jelenlegiSzelesseg + (10 * lepesek));
        panelMeretFrissites();
        break;
      case 'ArrowLeft':
        e.preventDefault();
        jelenlegiSzelesseg = Math.max(200, jelenlegiSzelesseg - (10 * lepesek));
        panelMeretFrissites();
        break;
      case 'ArrowDown':
        e.preventDefault();
        jelenlegiMagassag = Math.min(600, jelenlegiMagassag + (10 * lepesek));
        panelMeretFrissites();
        break;
      case 'ArrowUp':
        e.preventDefault();
        jelenlegiMagassag = Math.max(150, jelenlegiMagassag - (10 * lepesek));
        panelMeretFrissites();
        break;
    }
  }
});

// Kezdeti állapot beállítása
document.addEventListener('DOMContentLoaded', function() {
  panelMeretFrissites();
});
</script>

<!-- Rossz: Csúszka csak húzással állítható -->
<div class="rossz-csuszka-container">
  <label for="rossz-csuszka">Fényerő beállítása</label>
  <div class="csuszka-track">
    <input type="range" 
           id="rossz-csuszka"
           role="slider"
           aria-valuemin="0" 
           aria-valuemax="100" 
           aria-valuenow="50"
           class="csak-huzhatò-csuszka">
  </div>
  <!-- Nincs +/- gomb, nincs billentyűzet támogatás -->
</div>

<style>
.csak-huzhatò-csuszka {
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  outline: none;
  appearance: none;
  cursor: pointer;
}

/* Rossz: Billentyűzet navigáció letiltva */
.csak-huzhatò-csuszka:focus {
  outline: none; /* Rossz: nincs fókusz jelző */
}

.csak-huzhatò-csuszka::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
}

/* Rossz: Nincs billentyűzet eseménykezelő */
</style>

<script>
// Rossz: Csak húzás eseménykezelő, nincs gomb alternatíva
document.getElementById('rossz-csuszka').addEventListener('input', function() {
  console.log('Érték: ' + this.value);
  // Csak húzással változtatható
});

// Rossz: Nincs billentyűzet támogatás
// Rossz: Nincsenek +/- gombok
// Rossz: Nincs gyors beállítás lehetőség
</script>

<!-- Rossz: Csak húzással átrendezhető lista -->
<ul id="rossz-lista" class="csak-huzhatò-lista">
  <li draggable="true" class="lista-elem">1. elem</li>
  <li draggable="true" class="lista-elem">2. elem</li>
  <li draggable="true" class="lista-elem">3. elem</li>
  <li draggable="true" class="lista-elem">4. elem</li>
</ul>

<style>
.csak-huzhatò-lista {
  list-style: none;
  padding: 0;
}

.lista-elem {
  padding: 15px;
  margin: 5px 0;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  cursor: move;
}

.lista-elem:hover {
  background: #e9ecef;
}

/* Rossz: Nincs tabindex, nincs fókusz */
/* Rossz: Nincsenek pozíció vezérlő gombok */
</style>

<script>
// Rossz: Csak húzd-és-ejtsd eseménykezelők
document.querySelectorAll('.lista-elem').forEach(elem => {
  elem.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text/plain', e.target.outerHTML);
    e.target.style.opacity = '0.5';
  });
  
  elem.addEventListener('dragover', function(e) {
    e.preventDefault();
  });
  
  elem.addEventListener('drop', function(e) {
    e.preventDefault();
    // Csak húzással működik
  });
  
  elem.addEventListener('dragend', function(e) {
    e.target.style.opacity = '1';
  });
});

// Rossz: Nincs billentyűzet eseménykezelő
// Rossz: Nincs alternatív átrendezési mód
// Rossz: Nincs fókusz kezelés
// Rossz: Nincs ARIA támogatás
</script>

<!-- Rossz: Csak húzással átméretezhető panel -->
<div id="rossz-panel" 
     class="csak-huzhatò-panel" 
     aria-label="Átméretezhető panel">
  <div class="panel-tartalom">
    <h3>Csak húzással átméretezhető</h3>
    <p>Ez a panel csak a jobb alsó sarok húzásával méretezhető át.</p>
  </div>
  
  <!-- Rossz: Csak egy átméretezési fogas, nincs alternatíva -->
  <div class="csak-huzhatò-fogas"></div>
</div>

<style>
.csak-huzhatò-panel {
  position: relative;
  width: 300px;
  height: 200px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin: 20px auto;
}

.panel-tartalom {
  padding: 20px;
}

.csak-huzhatò-fogas {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: #666;
  cursor: se-resize;
  
  /* Rossz: Nincs tabindex, nem fókuszálható */
  /* Rossz: Nincs aria-label */
}

.csak-huzhatò-fogas:hover {
  background: #333;
}

/* Rossz: Nincs :focus stílus */
</style>

<script>
let huzas = false;

// Rossz: Csak egér eseménykezelők
document.querySelector('.csak-huzhatò-fogas').addEventListener('mousedown', function(e) {
  huzas = true;
  
  document.addEventListener('mousemove', function(e) {
    if (huzas) {
      const panel = document.getElementById('rossz-panel');
      const rect = panel.getBoundingClientRect();
      panel.style.width = (e.clientX - rect.left) + 'px';
      panel.style.height = (e.clientY - rect.top) + 'px';
    }
  });
  
  document.addEventListener('mouseup', function() {
    huzás = false;
  });
});

// Rossz: Nincs billentyűzet támogatás
// Rossz: Nincsenek +/- gombok
// Rossz: Nincs gyors méret beállítás
// Rossz: Nincs fókusz kezelés
// Rossz: Nincs ARIA támogatás
</script>

<!-- Rossz: Rejtett húzási funkciók dokumentáció nélkül -->
<div class="titokzatos-interface">
  <h2>Képgaléria</h2>
  <div class="kep-grid">
    <img src="/kep1.jpg" alt="Kép 1" class="huzhatò-kep">
    <img src="/kep2.jpg" alt="Kép 2" class="huzhatò-kep">
    <img src="/kep3.jpg" alt="Kép 3" class="huzhatò-kep">
    <img src="/kep4.jpg" alt="Kép 4" class="huzhatò-kep">
  </div>
  <!-- Nincs információ arról, hogy a képek húzhatók -->
  <!-- Nincs alternatív vezérlés -->
</div>

<style>
.kep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 20px;
}

.huzhatò-kep {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  /* Rossz: Nincs vizuális jel, hogy húzható */
}

.huzhatò-kep:hover {
  opacity: 0.8;
  /* Rossz: Nem egyértelmű, hogy mi történik */
}
</style>

<script>
// Rossz: Rejtett húzási funkcionalitás
document.querySelectorAll('.huzhatò-kep').forEach(kep => {
  kep.draggable = true;
  
  kep.addEventListener('dragstart', function(e) {
    // Rejtett funkció: képek átrendezhetők
    // De nincs visual cue, nincs dokumentáció
    e.dataTransfer.setData('text/plain', e.target.src);
  });
  
  kep.addEventListener('dragover', function(e) {
    e.preventDefault();
  });
  
  kep.addEventListener('drop', function(e) {
    e.preventDefault();
    // Titokzatos swap funkció
    const forras = e.dataTransfer.getData('text/plain');
    const celSrc = e.target.src;
    e.target.src = forras;
    
    // Rossz: Nem található elem visszaállítása
    document.querySelectorAll('.huzhatò-kep').forEach(otherKep => {
      if (otherKep.src === forras) {
        otherKep.src = celSrc;
      }
    });
  });
});

// Rossz: Nincs billentyűzet támogatás
// Rossz: Nincs alternatív módszer
// Rossz: Nincs felhasználói dokumentáció
// Rossz: Nincs vizuális feedback
// Rossz: Nincs undo funkció
</script>