[HTML 5] Elemente verschiben 3
Ich habe im HTML und mit etwas CSS eine Kleine Übersicht gebaut wie ich mir das vorstelle.
In Spalte 1: ist immer der Name des Gerätes
Spalte 2 bis 26: ist der verbleiben des Gerätes
Unter der Tabelle habe ich zwei Elemente:
Gelb: diese geht immer über 3 Spalten und ist für die Zeitgabe gedacht.
Das soll man per Drag-and-drop in die Tabelle ziehen können, dabei soll eine Kopie des Elementes erstellt werden, wenn man es dann in der Tabelle hat soll man durch Abtippen seinen Namen eintragen können, wenn das Element schon in der Tabelle steht soll es auch in der Tabelle verschoben werden können hierbei soll keine Kopie entstehen. Der Name soll im Nachhinein nicht verändert werden können.
Rot: Das geht über die gesamte Tabelle und soll wie beim gelben dieselben Funktionen haben, nur dass nicht der Name, sondern eine Bemerkung eingetragen werden soll.
Die Daten sollen nicht im Hintergrund gespeichert werden!
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html, body {
margin: 0;
}
div.seite {
display: flex;
width: 100%;
height: 100%;
flex-direction:column;
}
h1{
height: 100px;
font-size: 48px;
text-shadow: 0px 0px 2px #009cff;
text-align: center;
}
.zeile {
padding-top: 4px;
width: 100%;
display:flex;
}
.zelle {
width: 100px;
margin-right: 2px;
height: 30px;
border-radius: 5px;
box-shadow: 0px 0px 3px 0px #010101 inset;
}
.kopf {
width:100px;
text-align:center;
}
.normal {
font-size: 100%;
width: 304px;
padding-left: 8px;
height: 30px;
background-color: #ffa500;
border-radius: 5px;
box-shadow: 0px 0px 3px 0px #b2b2b2 inset;
cursor: pointer;
overflow: hidden;
}
.normal:hover {
background-color: #F7EA05;
}
.DD.hovering {
background: #104e8b;
border-color: #000000;
}
.lang {
width: 916px;
background-color: #fc0000;
}
.normalactive{
background:green !important;
border:2px solid yellow;
}
#copybox{
width:80%;
height:100px;
border:1px solid black;
overflow:auto;
}
</style>
<script src='/js_webseite/jquery.js'></script>
<script src='/js_webseite/jquery-ui.js'></script>
<title>Drag & Drop</title>
</head>
<body>
<div class="seite">
<h1>Überschrift</h1>
<div class="zeile">
<div class="zelle">Name</div>
<div class="zelle kopf">01</div>
<div class="zelle kopf">02</div>
<div class="zelle kopf">03</div>
<div class="zelle kopf">04</div>
<div class="zelle kopf">05</div>
<div class="zelle kopf">06</div>
<div class="zelle kopf">07</div>
<div class="zelle kopf">08</div>
<div class="zelle kopf">09</div>
</div>
<div class="zeile">
<div class="zelle">G 01</div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
</div>
<div class="zeile">
<div class="zelle">G 02</div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
<div class="zelle DD"></div>
</div>
<div class="normal"> Max und Moritz - Erster Streich </div>
<div class="normal lang">Max und Moritz - LANG</div>
<h4>Kopie Container</h4>
<div id="copybox"></div>
</div>
<script>
$('.normal').draggable({
stop: function(ev, ui) {
clone=$(this).clone();
$(this).draggable( "destroy" );
clone.css({
"position":"static",
"top":"auto",
"left":"auto"
});
clone.appendTo('#copybox');
}
});
$('.DD').droppable({
accept: '.normal',
hoverClass: 'hovering',
});
document.querySelectorAll('.normal').forEach(el => {
el.addEventListener('click', function(e) {
el.contentEditable = true;
el.classList.add('normalactive');
el.addEventListener('mouseout', function(e) {
let classholen=el.hasAttribute('class','normalactive');
if(classholen==true){
el.contentEditable = false;
el.classList.remove('normalactive');
}
});
});
});
</script>
</body>
</html>