Javascript/Jquery Need help with small drag and drop game.

Hi !
I would like to ask u for help me with simple, non-comercial project.
I want to create simple drag and drop game for my Horner's method website which I creating, and I need help, because I know only basics of javascript.

Rules of the game.
Drag and drop numbers from right table to matching fields in left table (with clone number, numbers in polynomials can reapeat ).
We have polynomial: W(x) = x[SUP]4[/SUP] + 3x[SUP]3[/SUP] +1x-3 ( I will try to do random polynomial and binomial each time later).
and binomial : x + 2
And we need to fill empty fields with appropriate numbers from second table (drag and drop).


How it is looking now :


For now I can only drag the numbers, and I need help because I don't know how to match numbers with appropriate fields.
I mean I would like to match correct numbers with specific place in table. (and disable this number if it's correct).


I used jquery.ui to do drag table-cells.
This is my HTML code:

  <div class="col-sm-8">
      <table class="game-table">
    <tr>
        <td class="up">SCHEMAT HORNERA</td>
        <td class="up makeMeDroppable">(Upuść tutaj)</td>
        <td class="up">(Upuść tutaj)</td>
        <td class="up">(Upuść tutaj)</td>
        <td class="up">(Upuść tutaj)</td>
    </tr>
    <tr>
        <td class="up">(Upuść tutaj)</td>
        <td class="down">(Upuść tutaj)</td>
        <td class="down">(Upuść tutaj)</td>
        <td class="down">(Upuść tutaj)</td>
        <td class="down">(Upuść tutaj)</td>
    </tr>
</table>
            </div>
        <div class="col-sm-4">
<table id="Cyfry">
    <tr>
        <td class="makeMeDraggable">-1</td>
        <td class="makeMeDraggable">-2</td>
        <td class="makeMeDraggable">0</td>
        <td class="makeMeDraggable">1</td>
    </tr>
    <tr>
        <td class="makeMeDraggable">2</td>
        <td class="makeMeDraggable">3</td>
        <td class="makeMeDraggable">4</td>
        <td class="makeMeDraggable">5</td>
    </tr>
    <tr>
        <td class="makeMeDraggable">6</td>
        <td class="makeMeDraggable">7</td>
        <td class="makeMeDraggable">8</td>
        <td class="makeMeDraggable">9</td>
    </tr>
   
</table>
                    </div>

Code (markup):

And my jquery code for drag

$( init );
function init() {
  $('.makeMeDraggable').draggable( {
 cursor: 'move',
****containment: 'document',
****helper: "clone"
  } );


 $('.makeMeDroppable').droppable( {
    drop: handleDropEvent
  } );
}

Code (markup):

Can u help me, please?

 

anybody?

 

in such cases (Matching) i would suggest you following :-

1) Assign "value" to your dropables like

<td class="up makeMeDroppable" data-value="2">(Upuść tutaj)</td>

Code (markup):

Now in above example i assume that this "droppable" only accept "2"
2) now when user drop number in the "dropable region", you need to call a function say "MatchValues()" which will match "Number" you droped and the "data-value" of the dropable region.
3) after matching you can do your required things

hope this helps

 

And doing it that way will entirely defeat the purpose of the game, since the user can just take a look at the source-code to see what s/he can drop on the zone. This has to be set up so that the checking of the values are done server-side, and then returning a value true / false (true if it's correct, false if it's wrong) - a simple ajax-call with a post-value will do nicely, and on the server you can use whatever server-side language you have available to process the content.

 

very Valid point, then i think server side check with ajax is a good solution