Drag and Drop

MALI · 5. August 2013

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

Roland · 5. August 2013

mh ich muss sagen habe das was du willst nicht verstanden.
etwas sortieren einen string oder html-elemente?
sry wenn ich mich dumm anstelle aber habe jetzt keine lust mein gehirn anzustrengen

cottton · 5. August 2013

Jo, ist irgentwie zu viel code. Als ob Du ne ganze Website postest und sagst "hier ist ein Fehler drin"
Was funktioniert denn nicht?
Am besten den Teil als kleines code-Beispiel schreiben.
Oft findet man sogar genau so selbst den Fehler. Passiert mir oft

MALI · 5. August 2013

Bin blutiger Anfänger. Werde mich bemühen, das ganze kürzer und prägnanter zu beschreiben.

MALI · 6. August 2013

Ein neuer Versuch mich kurz zu fassen:
BEISPIEL: der folgende code bringt in der ersten Zeile zufallsartiges Sortieren der Ziffern 1 bis 6. Diese können den Buchstaben von "fest stehendem Wort" T O M A T E" zugeordnet werden. Ich will aber, dass in der oberen Zeile zufallsartiges Sortieren der Buchstaben des Wortes T O M A T E ( O M T A T E - O M A T E T etc. ) erfolgt, die dann in der richtigen Reihenfolge den "fest stehenden" Ziffern von 1 bis 6 zugeordnet werden müssen. (Eine wichtige Übung im Lesenlern-Prozess)

HTML

<!doctype html>
<head>
<title>DOLLY</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <style>




#cardPile {
 margin: 0 auto;
 background: red;




/* Nur für die erste Karte kein Rand! */
#cardSlots:first-child, #cardPile div:first-child {
 margin-left: 1;
}




 </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.2.custom.js"></script>
<script src="js/TouchPunch.js"></script>




<script type="text/javascript">




var richtige = 0;
var versuch=0;
$( init );




function init() {
 // verstecken der Erfolgsmeldung
 $('#Erfolgsmeldung').hide();
 $('#Erfolgsmeldung').css( {




 } );
 // 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( {




 } );
 }
}
</script>
</head>
<body>




 <div id="cardPile"> </div>
 <div id="cardSlots"> </div>




</body>
</html>

Alles anzeigen

Roland · 6. August 2013

ah okay jetzt habe ich dein ziel verstanden.

muss zugeben das ich von juery keine peilung habe.
aber müsste es nicht reichen eine version davon einzubinden?

ansonsten das die buchstaben zufällig sortiert sind das klapt doch schon oder?
bei den zahlen kannst du doch die zufälligesortierung weglassen

MALI · 6. August 2013

Vielen Dank für den Hinweis, bringt mich aber nicht wirklich viel weiter. Ich brauche zwingend die "Umkehrung". Habe ursprünglich hier den Quelltext bekommen:http://www.elated.com/res/File…tial-guide/card-game.html

Drag and Drop

Jetzt mitmachen!

Teilen