Click here to Skip to main content
15,851,503 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
here is the code with draggable attribute added and cards are being dragged;

how is it possible to display alert when cards are at correct position

<!doctype html>
<html lang="en">
<head>

<title>Cards</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">

var correctCards = 0;
$( init );

function init() 
{ 
  
  var numbers = ['W', 'H', 'A', 'T'];
  numbers.sort( function() { return Math.random() - .5 } );

  for ( var i=0; i<10; 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
    } );
  }
  
function handleWhat( event, ui ) {
  var draggable = ui.draggable;  
  var android = $(this).data( 'U' );
  var science = ui.draggable.data( 'Y' );  
  if ( android == science ) {
    ui.draggable.addClass( 'correct' ); 
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
  }   
  }
} 
</script>
</head>
<body>
<div id="content">  
<div id="cardPile"> </div>  
</div>
</body>
</html>


What I have tried:

javascript code internet and several other things
Posted
Updated 6-Aug-21 22:26pm
v3
Comments
SeeSharp2 18-Jun-21 9:59am    
In your drop code add logic to check the position and then do your alert.
four systems 22-Jun-21 11:39am    
that sounds good
four systems 7-Aug-21 2:11am    
Changed the function; Now there is a function that moves the cards; How is it possible display message if the order is correct
four systems 23-Aug-21 7:59am    
https://jsfiddle.net/bsrm0z8L/

changed the code with another function but the alert doesn't appears

you could look at code with the link provided

1 solution

If you study the language you can find out about all its features: JavaScript Popup Boxes[^].
 
Share this answer
 
Comments
four systems 7-Aug-21 4:46am    
Thanks

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900