1

I have created this table.I want to set a variable Winner(that means it is Black or Red).Which variable if is B will drag the P1B.png.If it is R it will drag the P2R.png. Here is my table (I tried to do dragging but I didn't managed to.I use w3school(https://www.w3schools.com/howto/howto_js_draggable.asp)

 <table class="b" border="30" bordercolor="blue" style="width: 100%" height="100" id="myT" >
            <tbody><tr>
            
                   <td> 1</td>
                   <td> 2</td>
                  <td> 3</td>
                   <td> 4</td>
                   <td> 5</td>
                   <td> 6</td>
                   <td> 7</td>
                   <td> 8</td>
                   <td> 9</td>
                   <td> 10</td>
                   <td> 11</td>
                   <td style="width: 12px; height: 10px;">12 
                   <br>
                   
                  a <img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%" >
                   <br>
                  b <img class="dragme"        src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   c<img class="dragme"        src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   d<img class="dragme"       src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   e<img class="dragme"         src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   f<img  class="dragme"       src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   g<img class="dragme"         src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   h<img class="dragme"         src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   i<img  class="dragme"       src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   k<img   class="dragme"      src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   l<img  class="dragme"       src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   m<img  class="dragme"       src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   n<img class="dragme"        src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   o<img class="dragme"        src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   p<img class="dragme"        src="./images/P2R.png" class="b" alt="Norway" style="width:30%">
                   
                   
                   
                   
                   
                   
                   </td>
                   
                        </tr>
                        
                        <td> 24
                        
                        
                               
                   <br>
                       
                   a <img  id="dragme"        src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   b <img  id="dragme"            src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   c<img id="dragme"                      src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   d<img  class="dragme"                    src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   e<img  class="dragme"                   src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   f<img class="dragme"                            src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   g<img    class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   h<img class="dragme"          src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   i<img    class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   k<img class="dragme"                 src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   l<img class="dragme"                 src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   m<img class="dragme"  src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   n<img class="dragme"               src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   o<img  class="dragme"          src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   <br>
                   p<img class="dragme"     src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
                   
                   
                   
                    
                        </td>
                   <td> 23</td>
                   <td> 22</td>
                   <td> 21</td>
                   <td> 20</td>
                   <td> 19</td>
                   <td> 18</td>
                   <td> 17</td>
                   <td> 16</td>
                   <td> 15</td>
                   <td> 14</td>
                   
                   <td> 13
                   
                 
                   </td>
                        </tr>
                        </tbody>








  </div>

</div>

the javascript code is this :

  //Make the DIV element draggagle:
dragElement(document.getElementById("dragme"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
  
  
  
  

First,I want to be able to drag them.Second,if that is possible I want to do a system dragging(because I will do it after that ).If a variable ( variable winner lets call it is == to B then I want to be able to drag ONLY the P1B.png) ,if variable it is == R only P2R.png).I tried to do it but I failed many times so one of my tries was this

<p id="demo"></p>

<script>
var winner;
switch (winner == B || winner == R ) {
  case 0:
   winner = ;
    break;
  case 1:
    winner = ";
    break;
  
  case  2:
    winner = "something went wrong";
}
document.getElementById("demo").innerHTML = "Player is playing now " + winner;
</script>
New contributor
main klain is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

main klain is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.