<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/society.css" type="text/css">
<!--<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" /> -->
<style>
[draggable=true] {
cursor: move;
}
.destination {
width: 20em;
height: 2em;
border: 2px solid black;
}
.bullet {
display: inline-block;
background: #A4D9EB;
color: #496169;
width: 1.2em;
height: 1.2em;
border-radius: 1em;
text-align: center;
padding: 0.4em;
}
</style>
<title>Eine Gesellschaft erstellen</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h1>Eine Gesellschaft erstellen:</h1>
<div class="voter" id="voter1">
Wähler 1:
</div>
<script>
var items = ["a", "b", "c", "d", "e", "f"];
var nrdestination = 2 * items.length + 1;
for (i = 0; i < nrdestination; i++) {
if ((i % 2) == 1) {
var j = (i - 1) / 2;
ele = $('<div class="destination"><div draggable="true" class="bullet" id="bullet' + j + '">' + items[j] + '</div></div>');
} else {
ele = $('<div class="destination"></div>');
}
$("#voter1").append(ele);
}
function toPreferenceList() {
}
function ziehen(ev) {
ev.dataTransfer.setData('text', ev.target.id);
}
function ablegenErlauben(ev) {
ev.preventDefault();
}
function ablegen(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData('text');
var target = ev.target;
while (target.className.indexOf("destination") == -1) target = target.parentNode;
target.appendChild(document.getElementById(data));
}
window.addEventListener("load", function () {
var elms = document.querySelectorAll(".destination");
for (var i = 0; i < elms.length; i++) {
var zielzone = elms[i];
zielzone.addEventListener("drop", ablegen);
zielzone.addEventListener("dragover", ablegenErlauben);
};
elms = document.querySelectorAll("[draggable=true]")
for (var i = 0; i < elms.length; i++) {
var draggable = elms[i];
draggable.addEventListener("dragstart", ziehen);
};
});
</script>
</body>
</html>