<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<style>
h3{width:100%;}
#divpflanzen {
float: left;
margin:0 10px 0 0;
padding: 10px;
border: 1px solid black;
width: 50px;
height: 310px;
}
#divpflanzen img
{
float:left;
width:50px;
height:50px;
margin-top:2px;
}
#divganzematrix {
float: left;
margin: 0px;
padding: 0px;
width: 210px;
height: 60px;
}
.divreihe {
float: left;
margin: 0px;
padding: 0px;
width: 240px;
height: 60px;
}
.divreihe div {
float: left;
width: 50px;
height: 50px;
margin: 0 0 0 5px;
padding: 0px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Drag and Drop</h2>
<div id="divpflanzen" >
<!-- anstelle des data-attributes nun wieder eine eindeutige id
um auf das bild besser zugreifen zu können -->
<img src="http://forum.jswelt.de/images/1.jpg" draggable="true" id="blau" title="Ein blaues Bild" >
<img src="http://forum.jswelt.de/images/2.jpg" draggable="true" id="gelb" title="Ein gelbesBild">
<img src="http://forum.jswelt.de/images/3.jpg" draggable="true" id="dunkellila" title="Ein dunkel lilanes Bild">
<img src="http://forum.jswelt.de/images/4.jpg" draggable="true" id="gruen" title="Ein grünes Bild">
<img src="http://forum.jswelt.de/images/5.jpg" draggable="true" id="blasslila" title="Ein blass blaues Bild">
<img src="http://forum.jswelt.de/images/6.jpg" draggable="true" id="weiß" title="Ein weisses Bild">
</div>
<div id="divganzematrix" >
<div class="divreihe">
<!-- data-info soll den Bildnamen oder den Bildpfad speichern
so gehts ohne Array und Globale Variablen und der Bilderliste-->
<div data-id="00" ></div>
<div data-id="01" ></div>
<div data-id="02" ></div>
<div data-id="03" ></div>
</div>
<div class="divreihe">
<div data-id="04" ></div>
<div data-id="05" ></div>
<div data-id="06" ></div>
<div data-id="07" ></div>
</div>
<div class="divreihe">
<div data-id="08" ></div>
<div data-id="09" ></div>
<div data-id="10" ></div>
<div data-id="11" ></div>
</div>
<div class="divreihe">
<div data-id="12" ></div>
<div data-id="13" ></div>
<div data-id="14" ></div>
<div data-id="15" ></div>
</div>
</div>
<br style="clear:both"><br>
<button id="sndBtn" >Senden</button>
<script>
document.getElementById('sndBtn').addEventListener('click',sendHome,false);
//Referenze auf alle Divs in den divreihen in dropzones sammeln
var dropzones = document.querySelectorAll('#divganzematrix .divreihe div');
//Referenzen auf alle Images in divpflanzen in drgimg sammeln.
var drgimg = document.querySelectorAll('#divpflanzen img');
//bei Doppelclick Divs wieder leeren
for(var i = 0; i <dropzones.length; i++)
{
dropzones[i].addEventListener('dblclick',verwerfen,false);
dropzones[i].setAttribute('data-info','-');
}
//Eventlistener für alle divs in der dropzones collection setzen
//Diese Funktion wird aufgerufen wenn ein Image gezogen wird (siehe dragstart Listenerfunktion)
function setListeners(){
for(var i = 0; i <dropzones.length; i++)
{
dropzones[i].addEventListener('drop',dropImage,false);
dropzones[i].addEventListener('dragover',dragOver,false);
dropzones[i].addEventListener('dragleave',dragLeave,false);
}}
function removeListeners(){ //wird ausgeführt nachdem das image im div angezeigt wird (siehe drop Listenerfunktion )
for(var i = 0; i <dropzones.length; i++)
{
dropzones[i].removeEventListener('drop',dropImage,false);
dropzones[i].removeEventListener('dragover',dragOver,false);
dropzones[i].removeEventListener('dragleave',dragLeave,false);
}}
//Eventlistener für alle Images in der drgimg Collection setzen
for(var i = 0;i<drgimg.length;i++)
{
drgimg[i].addEventListener('dragstart',drag,false);
}
//// Listener Funktionen/////////////
function dragOver(ev) {
ev.preventDefault();
ev.target.style.border = '1px dashed red';
}
function dragLeave(ev) { //anzeigen das die maus über ein dropable Element gezogen wird
ev.preventDefault();
ev.target.style.border = '1px solid #000';
}
function verwerfen(ev)//image info und dada-attributes wieder aus dem div entfernen
{
this.style.background = 'none';
this.setAttribute('data-info', '-');
}
function drag(ev) { //ein Image wurde zum ziehen aus gewählt und in data die ID speichern
setListeners();
ev.dataTransfer.setData("text", ev.target.id);
}
function dropImage(ev) { //Image als Hintergrundbild im div anzeigen daten im data-info speichern
ev.preventDefault();
var imInfo = document.getElementById(ev.dataTransfer.getData("text")); //eine Referenz auf das gezogene Image erstellen
ev.target.style.background = 'url('+imInfo.src+') top left no-repeat'; // Image resource übergeben
ev.target.style.backgroundSize = 'cover'; //Background-image an die Größe des div anpassen
ev.target.setAttribute('data-info', imInfo.id); // kann aber auch der der Title oder ein anderes data-attribut gespeichert werden.
ev.target.style.border = '1px solid #000'; // Hervorhebung wieder zurücknehmen
removeListeners();//alle listener löschen um ein versehendliches draggen der divs zu verhindern
}
/////////////////////////Daten aus den divreihen auslesen um z B. an ein serverscript zu versenden
function getDivRowInfo()
{
var dataString = '?';
for (var i = 0;i<dropzones.length;i++)
{
if(dropzones[i].dataset.info == '-')continue;
console.log(dropzones[i].dataset.id);
dataString+= 'bildinfo='+dropzones[i].dataset.info+'-divid-'+dropzones[i].dataset.id+'"&';
}
return dataString;
}
function sendHome(){alert(getDivRowInfo());}
</script>
</body>
</html>
