Drag and Drop
Dies ist mein allererster Beitrag in einem FORUM überhaupt - hoffe, dass das dennoch SO korrekt ist!
Seit Tagen suche ich verzweifelt durch alle denkbaren INTERNET-Seiten an einer Lösung folgenden Problems: Wie kann ich die Buchstaben-Zeile mit der Ziffern-Zeile so "tauschen", dass die Ziffern immer in der gleichen Reihenfolge stehen, ABER die Buchstaben jeweils neu sortiert werden, um dann in der richtigen Reihenfolge "passgenau" eingeordnet zu werden. Hier der zugehörige Quelltext:
HTML
<!doctype html>
<head>
<title>DOLLY</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
/* Rand, Schrift und Zeilenh�he */
body {
margin: 10px;
font-family: "Arial Rounded MT Bold", solid;
line-height: 0.8em;
background: -moz-linear-gradient(center top , #E6E6E6, #CCCCCC) repeat scroll 0 0 #CCCCCC;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E6E6E6), to(#CCCCCC));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #E6E6E6, #CCCCCC);
/* IE 10 */
background: -ms-linear-gradient(top, #E6E6E6, #CCCCCC);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #E6E6E6, #CCCCCC);
background-repeat: repeat-x;
border: 1px solid #C6C6C6;
font-weight: bold;
text-shadow: 0 1px 0 #FFFFFF;
}
/* �berschriften anderen Font */
h1, h2, h3, h4 {
font-family: "Arial Rounded MT Bold", sans-serif;
}
/* Inhaltsbereich, nur darin kann verschoben werden */
#content {
margin: 10px 70px;
text-align: center;
}
/* Slots f�r f�r die Endposition (hier Konten) */
#cardSlots {
margin: 20px auto 0 auto;
background: #ddf;
font-size: 50px;
}
/* Bereich f�r die Karten (hier Klassen) */
#cardPile {
margin: 0 auto;
background: red;
}
/* F�r beide Bereiche gilt: */
#cardSlots, #cardPile {
width: 380px;
height: 38px;
padding: 35px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Nur f�r die Karten gilt */
#cardSlots div {
float: left;
width: 15px;
height: 45px;
padding: 15px;
padding-top: 15px;
padding-bottom: 0;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 0 10px;
background: #fff;
}
/* Nur f�r die erste Karte kein Rand! */
#cardSlots:first-child, #cardPile div:first-child {
margin-left: 1;
}
/* Wenn man mit einer Karte �ber einen Slot f�hrt, �ndert sich der background */
#cardPile div.hovered {
background: #aaa;
}
/* F�r alle Slots gilt */
#cardPile div {
float: left;
width:30px;
height:64px;
padding-left:20px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 0 10px;
background: #fff;
border-style: hidden;;
}
/* Der Text soll aus Platzgr�nden vertikal sein */
.text{
text-wrap:normal;
text-align:center;
-moz-transform:rotate(-270deg);
-moz-transform-origin: 60% left;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin: 60% left;
-o-transform: rotate(-270deg);
-o-transform-origin: 60% left;
}
#cardSlots div {
background: #666;
color: red;
font-size: 40px;
text-shadow: 0 0 3px #000;
}
/* Wenn eine Karte bewegt wird, erh�lt sie einen Schatten */
#cardSlots div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
/* Jede Karte wird gef�rbt, wenn sie passt */
<img src="http://www.wolfgangheinrich.de/images/860t.jpg" width="28" height="28"style="float: left; margin-left:-40px; margin-right: 10px; margin-top: -50px; margin-bottom: 100px;">
#card1.correct { background: red; }
#card2.correct { background: brown; }
#card3.correct { background: orange; }
#card4.correct { background: yellow; }
#card5.correct { background: green; }
#card6.correct { background: cyan; }
#card7.correct { background: blue; }
#card8.correct { background: indigo; }
#card9.correct { background: purple; }
#card0.correct { background: violet; }
/* Die Erfolgsmeldung*/
#Erfolgsmeldung {
position: absolute;
left: 85%;
top: 50%px;
margin-top: -50px,
margin-left: -100px,
width: 200;
height: 100;
z-index: 100;
background: red;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
#versuche{
font-size:1.5em;
}
button {
background-color: #666666;
height: 40px;
width: 100px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 5px 5px 5px 5px;
box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
color: #FFFFFF;
display: inline-block;
font-size: 16px;
text-align:center;
font-weight: bold;
margin: 0px 20px;
margin-bottom: 40px;
padding: 12px 20px;
position: relative;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
cursor: hand;
}
.button:hover {
box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 15px rgba(255, 255, 255, 0.4) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}
.button:active {
box-shadow: 0 2px 0 #393939, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset;
top: 7px;
}
</style>
<script type="text/javascript" src="[color=#666666][url=http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js]http://ajax.googleapis.com/ajax/libs/jqu?0/jquery.min.js[/url][/color]"></script>
<script type="text/javascript" src="[color=#666666][url=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js]http://ajax.googleapis.com/ajax/libs/jqu?query-ui.min.js[/url][/color]"></script>
<script src="[color=#666666][url=file:///C:/Users/wheinrich/Desktop/js/jquery-1.9.1.js]js/jquery-1.9.1.js[/url][/color]"></script>
<script src="[color=#666666][url=file:///C:/Users/wheinrich/Desktop/js/jquery-ui-1.10.2.custom.js]js/jquery-ui-1.10.2.custom.js[/url][/color]"></script>
<script src="[color=#666666][url=file:///C:/Users/wheinrich/Desktop/js/TouchPunch.js]js/TouchPunch.js[/url][/color]"></script>
<script type="text/javascript">
var richtige = 0;
var versuch=0;
$( init );
function init() {
// verstecken der Erfolgsmeldung
$('#Erfolgsmeldung').hide();
$('#Erfolgsmeldung').css( {
left: '85%',
top: '50%',
width: 0,
height: 0
} );
// Zur�cksetzen f�r neustart
richtige = 0;
versuch=0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
$('#versuche').html('' );
// Erstellen der Kontenklassen
var numbers = [ 1, 2, 3, 4, 5, 6, ];
numbers.sort( function() { return Math.random() - .5 } ); // Zufallsartiges sortieren
// der zentrale Teil: f�r jede karte wird eine eigene Div mit ID und der methode draggable erzeugt
for ( var i=0; i<6; i++ ) {
$('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true,
stop: handleDragStop
} );
}
// Erstellen der Konten
var words = [ 'T', 'o', 'm', 'a', 't', 'e', ];
var wordsort = [ 'T', 'o', 'm', 'a', 't', 'e', ];
wordsort.sort( function() { return Math.random() - .5 } ); // sortieren der Konten
for ( var i=1; i<=6; i++ ) {
$('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}
function handleDragStop( event, ui ) {
versuch++; // wird ausgel�st wenn drag beendet
$('#versuche').html('Versuche: ' + versuch);
}
function handleCardDrop( event, ui ) {
var cardNumber = $(this).data( 'number' );
var slotNumber = ui.draggable.data( 'number' );
// Wenn die Karte auf dem richtigen Slot gelandet ist,
// wird die Farbe ge�ndert und eingerastet und verhindert, dass sie nochmal verschoben wird
if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
richtige++;
}
// Wenn alle geschafft, erscheint die Erfolgsmeldung
if ( richtige ==6 ) {
//versuch++;
//$('#Erfolgsmeldung1').html('Geschafft! Versuche: ' + (versuch+1));
$('#Erfolgsmeldung').show();
$('#Erfolgsmeldung').animate( {
width: '200px',
height: '100px',
top: '40%',
left:'85%',
opacity: 0.8
} );
}
}
</script>
</head>
<body>
<h3 align="center">(Im Original: Ordne die richtigen Ziffern den Buchstaben zu!)</h3> <img src="[color=#666666][url=http://www.wolfgangheinrich.de/images/860t.jpg]http://www.wolfgangheinrich.de/images/860t.jpg[/url][/color]" width="28" height="28"style="float: left; margin-left:200px; margin-right: 10px; margin-top: 20px; margin-bottom: 100px;"><h5>Die Zeilen tauschen! ALSO: Ordne die Buchstaben zum richtigen Wort! (statt TOMATE Ziffern von 1-6 und obere Zeile TOMTEA, OMTATE etc.)</h5>
<p align="center"><a href="[color=#666666][url=file:///C:/Users/wheinrich/Desktop/DOLLY.html#]#[/url][/color]" onClick="window.open('drag/drag_player.html', 'Hilfe','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no,width=1160,height=732')"></a></p>
<div id="content">
<img src="[color=#666666][url=http://www.wolfgangheinrich.de/images/860t.jpg]http://www.wolfgangheinrich.de/images/860t.jpg[/url][/color]" width="28" height="28"style="float: left; margin-left:10px; margin-right: 10px; margin-top: 250px; margin-bottom: 100px;">
<div id="cardPile"> </div>
<div id="cardSlots"> </div>
<div id="versuche"> </div>
<div id="Erfolgsmeldung">
<h2>Geschafft!!</h2>
<p id="Erfolgsmeldung1"></p>
<button onClick="init()">Nochmal</button>
</div>
</div>
</body>
</html>
Alles anzeigen