Drag And Drop - The Elements Don't Drop
i'm making a drag and drop quiz here's the full code A jQuery Drag-and-Drop quiz <
Solution 1:
well, i've found an answer, if someone is gonna need this code you just need to edit
functionhandleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'string' );
var cardNumber = ui.draggable.data( 'string' );
this way it will detect the strings :) have a nice day
Solution 2:
<!doctype html><htmllang="en"><head><title>A jQuery Drag-and-Drop Card Game</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><linkrel="stylesheet"type="text/css"href="style.css"><scripttype="text/javascript"src="./jquery.min.js"></script><scripttype="text/javascript"src="./jquery-ui.min.js"></script><scripttype="text/javascript">var correctCards = 0;
$( init );
functioninit() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '580px',
top: '250px',
width: 0,
height: 0
} );
// Reset the game
correctCards = 0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
<!-- this shows how many cards -->
// Create the pile of shuffled cardsvar numbers = [ 'a','b','c','d'];
numbers.sort( function() { returnMath.random() - .2 } );
<!-- Note make sure you name your cards a.gif, b.gif, c.gif, d.gif -->
for ( var i=0; i<4; i++ ) {
$('<div>' + "<img src = \"" + numbers [i] + ".gif\" width =\"60\"height = \"100\" />"+ '</div>').data( 'string', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slotsvar words = [ 'a', 'b', 'c', 'd'];
for ( var i=1; i<=4; i++ ) {
$('<div>' + words[i-1] + '</div>').data( 'string', words[i-1] ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}
functionhandleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'string' );
var cardNumber = ui.draggable.data( 'string' );
// If the card was dropped to the correct slot,// change the card colour, position it directly// on top of the slot, and prevent it being dragged// againif ( 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 );
correctCards++;
}
// If all the cards have been placed correctly then display a message// and reset the cards for another goif ( correctCards == 4 ) {
$('#successMessage').show();
$('#successMessage').animate( {
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
} );
}
}
</script></head><body><divclass="wideBox"><h1>Drag-and-Drop with jQuery</h1><h2>Card Game</h2></div><divid="content"><divid="cardPile"></div><divid="cardSlots"></div><divid="successMessage"><h2>You did it!</h2><buttononclick="init()">Play Again</button></div></body></html>Solution 3:
/* style.css *//* This game works in Chrome *//* Add some margin to the page and set a default font and colour */body {
margin: 30px;
font-family: "Georgia", serif;
line-height: 1.8em;
color: #333;
}
/* Give headings their own font */h1, h2, h3, h4 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/* Main content area */#content {
margin: 80px70px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* Header/footer boxes */.wideBox {
clear: both;
text-align: center;
margin: 70px;
padding: 10px;
background: #ebedf2;
border: 1px solid #333;
}
.wideBoxh1 {
font-weight: bold;
margin: 20px;
color: #666;
font-size: 1.5em;
}
/* Slots for final card positions */#cardSlots {
margin: 50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */#cardPile {
margin: 0 auto;
background: #ffd;
}
#cardPile {
width: 360px;
height: 120px;
padding: 20px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 00 .3emrgba(0, 0, 0, .8);
-webkit-box-shadow: 00 .3emrgba(0, 0, 0, .8);
box-shadow: 00 .3emrgba(0, 0, 0, .8);
}
#cardSlots {
width: 360px;
height: 120px;
padding: 20px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 00 .3emrgba(0, 0, 0, .8);
-webkit-box-shadow: 00 .3emrgba(0, 0, 0, .8);
box-shadow: 00 .3emrgba(0, 0, 0, .8);
}
/* Individual cards and slots */#cardPilediv {
float: left;
width: 58px;
height: 78px;
padding: 10px;
padding-top: 5px;
padding-bottom: 34px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 00010px;
background: #fff;
}
#cardSlotsdiv {
float: left;
width: 58px;
height: 78px;
padding: 10px;
padding-top: 40px;
padding-bottom: 0;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 00010px;
background: #fff;
}
#cardSlotsdiv:first-child {
margin-left: 0;
}
#cardPilediv:first-child {
margin-left: 0;
}
#cardSlotsdiv.hovered {
background: #aaa;
}
#cardSlotsdiv {
border-style: dashed;
background: #666;
font-size: 50px;
}
#cardPilediv {
background: red;
color: #fff;
font-size: 50px;
text-shadow: 003px#000;
}
#cardPilediv.ui-draggable-dragging {
-moz-box-shadow: 00 .5emrgba(0, 0, 0, .8);
-webkit-box-shadow: 00 .5emrgba(0, 0, 0, .8);
box-shadow: 00 .5emrgba(0, 0, 0, .8);
}
}
/* Individually coloured cards *//* Note carda will not turn to a new colour */#carda.correct { background: blue; }
#cardb.correct { background: green; }
#cardc.correct { background: orange; }
#cardd.correct { background: yellow; }
/* "You did it!" message */#successMessage {
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5emrgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5emrgba(0, 0, 0, .8);
box-shadow: .3em .3em .5emrgba(0, 0, 0, .8);
padding: 20px;
}
Post a Comment for "Drag And Drop - The Elements Don't Drop"