erazor2106
Neues Mitglied
Hallo Leute,
bin noch neu im Bereich HTML (5) und bräuchte ein wenig Hilfe bzgl. Drag & Drop. Ich habe ein Beispiel gefunden welches ich angefangen zu verändern aber nicht weiter komme:
Es soll so in etwa aussehen nur das man elemente von links nach recht UND von rechts nach links verschieben kann. Es soll im linken Feld am Anfang nur eine einfach Auflistung (unter einander) der Elemente angezeigt werden. Es müssen also nicht solche großen Elemente sein.
Ich hoffe mir kann da jemand bei weiterhelfen.
VIelen Dank und viele Grüße erazor
bin noch neu im Bereich HTML (5) und bräuchte ein wenig Hilfe bzgl. Drag & Drop. Ich habe ein Beispiel gefunden welches ich angefangen zu verändern aber nicht weiter komme:
Code:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left;padding:0px;margin:0px;-moz-user-select:none;
}
#boxA { background-color: #7fffd4; width:275px; height:350px; }
#boxA1 { background-color: #f08080; width:255px; height:25px; }
#boxA2 { background-color: #f08080; width:255px; height:25px; }
#boxA3 { background-color: #f08080; width:255px; height:25px; }
#boxA4 { background-color: #f08080; width:255px; height:25px; }
#boxA5 { background-color: #f08080; width:255px; height:25px; }
#boxA6 { background-color: #f08080; width:255px; height:25px; }
#boxB { background-color:#ffebcd; width:275px; height:350px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
</script>
</head>
<body>
<center>
<div id="boxA"
<div id="boxA1" draggable="true"
ondragstart="return dragStart(event)">
<p>Feld 1</p>
</div>
<div id="boxA2" draggable="true"
ondragstart="return dragStart(event)">
<p>Feld 2</p>
</div>
<div id="boxA3" draggable="true"
ondragstart="return dragStart(event)">
<p>Feld 3</p>
</div>
<div id="boxA4" draggable="true"
ondragstart="return dragStart(event)">
<p>Feld 4</p>
</div>
<div id="boxA5" draggable="true"
ondragstart="return dragStart(event)">
<p>Feld 5</p>
</div>
<div id="boxA6" draggable="true"
ondragstart="return dragStart(event)">
<p>Feld 6</p>
</div>
</div>
<div id="boxB" ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
</div>
</center>
</body>
</html>Es soll so in etwa aussehen nur das man elemente von links nach recht UND von rechts nach links verschieben kann. Es soll im linken Feld am Anfang nur eine einfach Auflistung (unter einander) der Elemente angezeigt werden. Es müssen also nicht solche großen Elemente sein.
Ich hoffe mir kann da jemand bei weiterhelfen.
VIelen Dank und viele Grüße erazor
