Merkliste

Titel

Merkliste

<div style="max-height: 350px; max-width: 960px; background-color: green; position: relative;">
<div style="max-width: 320px; position: absolute; left: 0px;"><center>
<h3>Titel</h3>
</center>
<div style="max-width: 300px; max-height: 300px; position: relative; overflow-x: hidden;overflow-y: hidden;"><img src="http://www.avive.de/wp-content/uploads/2014/02/Brasilien-Urlaub.jpg" style="width: 100%; height: 100%;" class="Titel_1" draggable="true" ondragstart="drag(event)" id="Titel_1.1" alt="" /> <img src="https://blog.igopost.de/wp-content/uploads/2012/04/strand.jpg" style="width: 100%; height: 100%;" class="Titel_1" draggable="true" ondragstart="drag(event)" id="Titel_1.2" alt="" /> <img src="http://www.wand-design.de/images/product_images/info_images/0370-1-01_wand-design_strand_fototapete_seestern_am_strand.jpg" style="width: 100%; height: 100%;" class="Titel_1" draggable="true" ondragstart="drag(event)" id="Titel_1.3" alt="" />  <img src="http://www.eqs-corporate-communications.com/fileadmin/templates/images/icon_pfeil_HP_left.svg" style="width: 15%; height: 15%; position: absolute; top: 42.5%; left: 0px; cursor: pointer; background-color: lightgrey; opacity: 0.7; border-top-right-radius: 18px; border-bottom-right-radius: 18px;" onclick="Titel_1(-1)" alt="" /> <img src="http://www.eqs-corporate-communications.com/fileadmin/templates/images/icon_pfeil_HP_right.svg" style="width: 15%; height: 15%; position: absolute; top: 42.5%; right: 0px; cursor: pointer; background-color: lightgrey; opacity: 0.7; border-top-left-radius: 18px; border-bottom-left-radius: 18px;" onclick="Titel_1(1)" alt="" /></div>
</div>

<div style="max-width: 320px; position: absolute; left: 330px; right: 310px;"><center>
<h3>Titel</h3>
</center>
<div style="max-width: 300px; max-height: 300px; position: relative; overflow-x: hidden;overflow-y: hidden;"><img src="http://www.avive.de/wp-content/uploads/2014/02/Brasilien-Urlaub.jpg" style="width: 100%; height: 100%;" class="Titel_2" draggable="true" ondragstart="drag(event)" id="Titel_2.1" alt="" /> <img src="https://blog.igopost.de/wp-content/uploads/2012/04/strand.jpg" style="width: 100%; height: 100%;" class="Titel_2" draggable="true" ondragstart="drag(event)" id="Titel_2.2" alt="" /> <img src="http://www.wand-design.de/images/product_images/info_images/0370-1-01_wand-design_strand_fototapete_seestern_am_strand.jpg" style="width: 100%; height: 100%;" class="Titel_2" draggable="true" ondragstart="drag(event)" id="Titel_2.3" alt="" />  <img src="http://www.eqs-corporate-communications.com/fileadmin/templates/images/icon_pfeil_HP_left.svg" style="width: 15%; height: 15%; position: absolute; top: 42.5%; left: 0px; cursor: pointer; background-color: lightgrey; opacity: 0.7; border-top-right-radius: 18px; border-bottom-right-radius: 18px;" onclick="Titel_2(-1)" alt="" /> <img src="http://www.eqs-corporate-communications.com/fileadmin/templates/images/icon_pfeil_HP_right.svg" style="width: 15%; height: 15%; position: absolute; top: 42.5%; right: 0px; cursor: pointer; background-color: lightgrey; opacity: 0.7; border-top-left-radius: 18px; border-bottom-left-radius: 18px;" onclick="Titel_2(1)" alt="" /></div>
</div>

<div style="max-width: 320px; position: absolute; right: 0px;"><center>
<h3>Titel</h3>
</center>
<div style="max-width: 300px; max-height: 300px; position: relative; overflow-x: hidden;overflow-y: hidden;"><img src="http://www.avive.de/wp-content/uploads/2014/02/Brasilien-Urlaub.jpg" style="width: 100%; height: 100%;" class="Titel_3" draggable="true" ondragstart="drag(event)" id="Titel_3.1" alt="" /> <img src="https://blog.igopost.de/wp-content/uploads/2012/04/strand.jpg" style="width: 100%; height: 100%;" class="Titel_3" draggable="true" ondragstart="drag(event)" id="Titel_3.2" alt="" /> <img src="http://www.wand-design.de/images/product_images/info_images/0370-1-01_wand-design_strand_fototapete_seestern_am_strand.jpg" style="width: 100%; height: 100%;" class="Titel_3" draggable="true" ondragstart="drag(event)" id="Titel_3.3" alt="" />  <img src="http://www.eqs-corporate-communications.com/fileadmin/templates/images/icon_pfeil_HP_left.svg" style="width: 15%; height: 15%; position: absolute; top: 42.5%; left: 0px; cursor: pointer; background-color: lightgrey; opacity: 0.7; border-top-right-radius: 18px; border-bottom-right-radius: 18px;" onclick="Titel_3(-1)" alt="" /> <img src="http://www.eqs-corporate-communications.com/fileadmin/templates/images/icon_pfeil_HP_right.svg" style="width: 15%; height: 15%; position: absolute; top: 42.5%; right: 0px; cursor: pointer; background-color: lightgrey; opacity: 0.7; border-top-left-radius: 18px; border-bottom-left-radius: 18px;" onclick="Titel_3(1)" alt="" /></div>
</div>
</div>
  <script>
var slideIndex = 1;
Titel1(slideIndex);

function Titel_1(n) {
  Titel1(slideIndex += n);
}

function Titel_2(n) {
  Titel2(slideIndex += n);
}

function Titel_3(n) {
  Titel3(slideIndex += n);
}

<style type="text/css">
#div1 {width: 150px; min-height: 1000px; max-height: 1000px; padding: 10px; border: 1px solid #aaaaaa; position: relative; top: 0px; text-align: center; font-size: 25px; font-weight: bold; font-family: Arial; color: darkred; background-color: lightgreen}
#Merkliste {max-width: 90%; min-height: 94%; max-height: 94%; text-align: center; font-size: 15px; font-weight: bold; font-family: Arial; background-color: white; overflow-x: hidden; position: absolute; left: 5%; top: 5%;}
</style> <script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var Titel = ev.dataTransfer.getData("text");
    var Merkliste = document.getElementById("Merkliste").value;
    document.getElementById("Merkliste").innerHTML = (Merkliste + Titel + "
");
}
</script>
<div style="position: relative; max-width: 350px;">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><center>Merkliste <textarea id="Merkliste" placeholder="Noch keine Einträge in der Merkliste! Ziehen sie den Artikel ihrer Wahl einfach hier rein um ihn auf die Merkliste zu setzen!">