Score if drag&drop to the right category and make img disappear Drag&drop Jquery game

Question

I'm very new to j Query UI. I was trying to design a drag&drop game. I looked into lots of answers in stack overflow but not getting very similar examples(or maybe I couldn't figure out).
Basically, I tried to do a recycling game where you can drag and drop different items either to the recycle bin or trash bin. All the spans are image actually. I meant to put those bins side by side, the CSS worked for image before but not for span now.

Here's the fiddle for it. the dragging works on my browser but not working in fiddle.

https://jsfiddle.net/92dty8cq/9/

[code, it's all in fiddle]

What I tried to figure were two thing:

1.How to make my items disappear when I drop them in either of the bins?

2.How to count the right answer and show the total score when you finish playing the game?

And also why it works locally but not on fiddle?

I kinda have a logic that I should count the distance(data-x/y) and match the classes/data-type of the bin and items but had trouble coding it out.

Any suggestion? Any hint will be really appreciate it!

Answer 1

Here is a working JSFiddle.

1. How to make my items disappear when I drop them in either of the bins?

• Check out the draggable documentation for .drop()
• To hide the element only when they are in either of the bins, you can use the accept option.

2. How to count the right answer and show the total score when you finish playing the game?

You can initialize a score of 0and increment it every time a draggable is accepted by a droppable.

$(function () {

    // set the initial score to 0
    var score = 0;
    // and put it into the html
    $("#score").find("span").html(score);

    // increment score
    var incrementScore = function() { 
        return ++score;
    }

    // update the score after calling the incrementScore() func
    var updateScoreHtml = function() {
        $("#score").find("span").html(incrementScore());
    }

And for the draggable, add a hide() method,

  $(".drag-item").draggable({
      hide: function() {
        $(this).hide();   
      }
  });

That combined with the droppable code,

    $(".dropzone#recyclebin").droppable({
        accept: ".recyclable",
        // if there is an accepted drop...
        drop: function (event, ui) {
            // call the hide() method of the draggable
            ui.draggable.hide();
            // and update the score.
            updateScoreHtml();
        }
    });

...achieves what you're looking for.

The HTML should be like so:

<div id="graphic-container">
    <div id="draggable-container">
        <div class="drag-item recyclable">
            <p>Glass Bottle</p>
        </div>
        <div class="drag-item notrecyclable">
            <p>Mirror</p>
        </div>
        <div class="drag-item recyclable">
            <p>Paper</p>
        </div>
    </div>
    <div id="dropzone-container">
        <div id="recyclebin" class="dropzone">Recycle Bin</div>
        <div id="trashbin" class="dropzone">Trash Bin</div>
    </div>
</div>

Notice that ".recyclable" and ".notrecyclable" are classes for the drag-items and that "#recyclebin" and "#trashbin" are ids for the dropzone-containers.

This allows you to use the accept option for the droppable objects correctly.

---

3. Why doesn't it work on JSFiddle?

To see why the dragging is not working on JSFiddle, take a look at the JavaScript console in your browser. You will see the following two errors:

• Mixed Content: The page at 'https://fiddle.jshell.net/92dty8cq/9/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.10.2.js'. This request has been blocked; the content must be served over HTTPS. fiddle.jshell.net/:1
• Mixed Content: The page at 'https://fiddle.jshell.net/92dty8cq/9/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/ui/1.11.4/jquery-ui.js'. This request has been blocked; the content must be served over HTTPS.

The reason why this is happening is because JSFiddle is a secure page (over HTTPS), but you are including the two scripts as insecure resources (over HTTP).

The script tags in your HTML should be:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Here is a full output of the errors in the console:

---

Resources

For next steps, review the JQuery UI documentation for

• droppable
• draggable

Hope that helps!