Response title
This is preview!
Move this topic
Drop if content matches
in Using jQuery UI
•
6 years ago
Hey, i am currently working on a jquery math game project where some tasks are in div elements on the rights side and the results are in divs on the left side. The divs with the tasks also contain a hidden div wich contains the result of the task. The users have to drag the result divs on the task divs. My question now is How can i check if the content of the two divs match? I would appreciate any help
1
Replies(5)
Re: Drop if content matches
6 years ago
Can you provide a page that shows what you've done so far? It would help us see the structure of the divs.
Leave a comment on kbwood.au's reply
Re: Drop if content matches
6 years ago
Oh yeah ofcourse
html:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Ihr Spiel</title>
- <link href="main.css" rel="stylesheet">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
- <script src="dragtest.js"></script>
- </head>
- <body>
- <div class="container">
- <div class="bg">
- <div class='boxl' id='boxl1'> <div class='result'></div></div>
- <div class='boxl' id='boxl2'> <div class='result'></div></div>
- <div class='boxl' id='boxl3'> <div class='result'></div></div>
- <div class='boxl' id='boxl4'> <div class='result'></div></div>
- <div class='boxr' id='boxr1'>
- <div class='num1'></div>
- <div class='operator'></div>
- <div class='num2'></div>
- <div class='result2'></div>
- </div>
- <div class='boxr' id='boxr2'>
- <div class='num1'></div>
- <div class='operator'></div>
- <div class='num2'></div>
- <div class='result2'></div>
- </div>
- <div class='boxr' id='boxr3'>
- <div class='num1'></div>
- <div class='operator'></div>
- <div class='num2'></div>
- <div class='result2'></div>
- </div>
- <div class='boxr' id='boxr4'>
- <div class='num1'></div>
- <div class='operator'></div>
- <div class='num2'></div>
- <div class='result2'></div>
- </div>
- </div>
- </div>
- <!-- <input type="button" id="close" value="schließen"> Falls Sie im Spiel einen Button einfügen möchten, der das Spielefenster schließt. -->
- </body>
- </html>
- $(document).ready(function()
- {
- var results = [" "," "," "," "]
- for(var i=0;i<4;i++)
- {
- var operator = Math.floor(Math.random()*2)+1;
- var firstnumber = Math.floor(Math.random() * 10)+1;
- var secondnumber =Math.floor(Math.random() * 10)+1;
- if(operator== 2)
- {
- var result = parseInt(firstnumberl) + parseInt(secondnumber);
- $(".operator").eq(i).text("+");
- }
- else
- {
- if(secondnumber> firstnumber)
- {
- var result = parseInt(firstnumber) - parseInt(secondnumber);
- $(".operator").eq(i).text("-");
- }
- else
- {
- var result = parseInt(firstnumber) - parseInt(secondnumber);
- $(".operator").eq(i).text("-");
- }
- }
- results[i]= result;
- $(" .num1").eq(i).text(firstnumber);
- $(" .num2").eq(i).text(secondnumber);
- $(" .result2").eq(i).text(result).hide();
- }
- for(var i = 0; i<4;i++)
- {
- $(" .result").eq(i).text(results[i]);
- }
- $(".boxl").draggable({ revert: 'invalid'});
- $("#boxr1").droppable({
- accept:"boxl2"
- });
- }
- div.container { /* enthaelt das gesamte Spiel */
- width:100%;
- height:100%;
- }
- div.bg { /* is im "container". */
- background-image: url(pics/hintergrund.jpg);
- width:1240px;
- height:775px;
- border:10px solid black;
- margin-left: auto;
- margin-right: auto;
- display: flex;
- flex-direction: row;
- }
- div#containerlevel { /* ist in "bg" rechts. */
- width:200px;
- height:80px;
- margin-top: 56%;
- margin-right: 40%;
- display: flex;
- flex-direction: row;
- }
- .levelformatierung{ /* ist in "containerlevel" (Level:). */
- color: white;
- font-size: 300%;
- display: flex;
- justify-content: center;
- margin-top: 10px;
- }
- div#boxl1{ /* Boxen links bei 2x2. */
- height: 190px;
- width: 200px;
- margin-top: 43px;
- margin-left: 58px;
- position: absolute;
- background-color: aqua
- }
- div#boxl2{
- height: 190px;
- width: 200px;
- margin-top: 43px;
- margin-left: 260px;
- position: absolute;
- background-color: aqua
- }
- div#boxl3{
- height: 190px;
- width: 200px;
- margin-top: 233px;
- margin-left: 58px;
- position: absolute;
- background-color: aqua
- }
- div#boxl4{
- height: 190px;
- width: 200px;
- margin-top: 233px;
- margin-left: 260px;
- position: absolute;
- background-color: aqua
- }
- div#boxr1{ /* Boxen rechts bei 2x2. */
- height: 290px;
- width: 300px;
- margin-top: 48px;
- margin-left: 550px;
- position: absolute;
- background-color: aqua
- }
- div#boxr2{
- height: 290px;
- width: 300px;
- margin-top: 48px;
- margin-left: 860px;
- position: absolute;
- background-color: aqua;
- }
- div#boxr3{
- height: 290px;
- width: 300px;
- margin-top: 348px;
- margin-left: 550px;
- position: absolute;
- background-color: aqua
- }
- div#boxr4{
- height: 290px;
- width: 300px;
- margin-top: 348px;
- margin-left: 860px;
- position: absolute;
- background-color: aqua
- }
Leave a comment on sedna98's reply
Re: Drop if content matches
6 years ago
Something like this:
- $('.boxr').droppable({
- accept: '.boxl' ,
- drop: function(event, ui) {
- if ($(this).find('.result2').text() === ui.draggable.find('.result').text()) {
- // Matching...
- }
- }
- });
Leave a comment on kbwood.au's reply
Re: Drop if content matches
6 years ago
Yeah thank you very much it work! But how can i make the draggable disapear after it has been dropped?
Leave a comment on sedna98's reply
Leave a comment on kbwood.au's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to sedna98's question