[HTML 5] Elemente verschiben
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
<script src="/js_webseite/jquery.js"></script>
<script src="/js_webseite/jquery-ui.js"></script>
<style>
.day {
border: 5px dashed transparent;
background: #ddd;
margin: 1em;
min-height: 8em;
padding: 1em;
width: 20em;
}
.day.hovering {
background: #b6d6fb;
border-color: #276cbc;
}
.item {
background: white;
cursor: pointer;
display: inline-block;
padding: 1em;
}
</style>
<div class="day">
<div class="item">Element</div>
</div>
<div class="day">
</div>
<script>
$( '.item' ).draggable({
helper: 'clone'
});
$( '.day' ).droppable({
accept: '.item',
hoverClass: 'hovering',
drop: function( ev, ui ) {
ui.draggable.detach();
$( this ).append( ui.draggable );
}
});
</script>