Problem with drag and drop an image to a cell table

Problem with drag and drop an image to a cell table

I'm making a little utility where the user is going to be able to drag an image and drop it inside of cell table. Everything works properly until the moment the image is dropped inside the cell, I want to have the image appended to the cell that was chosen for it, but it is appended into a completely diferent place.

HTML:
  1.    
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Test</title>
  6. </head>
  7. <script type="text/javascript" src="src/js/jquery-2.1.4.min.js"></script>
  8. <script type="text/javascript" src="src/js/jquery-ui.min.js"></script>
  9. <script type="text/javascript" src="src/js/futbolitoDados.js"></script>
  10. <link rel="stylesheet" type="text/css" href="src/css/boardStyle.css">
  11. <body>
  12. <div id="boardContainer">
  13. <div id="right">
  14. <p id="dice1"></p><p id="dice2"></p> 
  15. <button id="diceRoller">Lanzar Dados</button>
  16. </div>
  18. <div id="left"></div>
  19. </div>
  20. </body>
  21. <script type="text/javascript">
  22. var board = new Board();
  23. board.buildBoard('left',0,'black');
  24. </script>
  25. </html>

JavaScript:

  2. $(function() {
  3. $('td.soccer-field').click(function(){
  4. if ($('#dice1').text() != '' && $('#dice2').text() != '') {
  5. if ($('td[data-path="begin-path"]').length == 0) {
  6. $(this).attr('data-path','begin-path');
  7. $(this).off('mouseenter mouseleave');
  8. $(this).addClass('selected-path');
  9. } else if ($('td[data-path="begin-path"]').length && $(this).attr('data-path') != 'begin-path' && $('td[data-path="end-path"]').length == 0){
  10. $(this).attr('data-path','end-path');
  11. $(this).addClass('actual-path');
  12. $('.selected-path').addClass('actual-path');
  13. $('.actual-path').removeClass('selected-path');
  14. } else if ($(this).attr('data-path') == 'end-path'){
  15. $(this).removeAttr('data-path');
  16. $('.actual-path').addClass('selected-path');
  17. $('.selected-path').removeClass('actual-path');
  18. }; 
  19. }
  20. });


  23. $('div.soccer-field').hover(
  24. function () {
  25. if ($('#dice1').text() != '' && $('#dice2').text() != '') {
  26. if ($('td[data-path="begin-path"]').length == 0) {
  27. $(this).attr('data-path','select-begin-path');
  28. } else if($(this).attr('data-path') != 'begin-path'){
  29. var presentCell = $(this).attr('id') + $(this).parent().attr('id');
  30. var cell;
  31. if ($(this).attr('data-path') == 'ending') {
  32. $('.selected-path').each(function(){
  33. cell = $(this).attr('id') + $(this).parent().attr('id');
  34. distance = new Board().calculateDistanceSquares(presentCell,cell);
  35. if (distance == 1 ){
  36. $('div[data-path="ending"]').removeClass('selected-path');
  37. $('div[data-path="ending"]').removeAttr('data-path');
  38. if ($(this).attr('data-path') != 'begin-path')
  39. {
  40. $(this).attr('data-path','ending');
  41. }
  42. return;
  43. }
  44. });
  45. }else if ($('td[data-path="end-path"]').length == 0){
  46. var actualCell =$(this);
  47. var dicesResult = parseInt($('#dice1').text()) + parseInt($('#dice2').text());
  48. $('.selected-path').each(function(){
  49. cell = $(this).attr('id') + $(this).parent().attr('id');
  50. distance = new Board().calculateDistanceSquares(presentCell,cell);
  51. if (distance == 1 && $('.selected-path').length <= (dicesResult -1)){
  52. actualCell.attr('data-path','ending');
  53. actualCell.addClass('selected-path');
  54. if ($(this).attr('data-path') != 'begin-path') {
  55. $(this).removeAttr('data-path');
  56. };
  57. return ;
  58. }
  59. });
  60. }
  61. }
  62. }
  63. },function () {
  64. if ( $(this).attr('data-path') == "select-begin-path") {
  65. $(this).removeAttr('data-path');
  66. }
  67. });

  69. $('#diceRoller').click(function() {
  70. $('#dice1').text(Math.floor(Math.random()*6)+1);
  71. $('#dice2').text(Math.floor(Math.random()*6)+1);
  72. $(this).attr('disabled',true);
  73. });

  75. $('.drag-container img.draggable').draggable({
  76. cursor : 'move',
  77. revert: 'invalid',
  78. refreshPositions : true,
  79. opacity: .45,
  80. delay : 50
  81. });

  83. $('#board .soccer-field').droppable({
  84. accept: '.drag-container img.draggable',
  85. hoverClass: 'hover-pawn',
  86. drop: function(event, ui){
  87. $(this).html(ui.draggable);
  88. ui.draggable.draggable("option","disabled",true);
  89. }
  90. });
  91. });

  93. //function Board(playerTurn, piecesPosition, gamePhase, gameBegginingType, container)
  94. function Board(){
  95. this.buildBoard = function  (container,gamePhase,playerTurn) {
  96. var playerTurn = playerTurn;
  97. var gamePhase = gamePhase;
  98. var board = $('<table></table>').attr('id','board');
  99. if (gamePhase == 0) {
  100. var sparePiecesBlack = $('<div></div>').attr('id','spare-pieces-black'),img;
  101. sparePiecesBlack.addClass('drag-container');
  102. for (var i = 0; i < 5 ; i++) {
  103. img = $('<img>').attr('id',i+1);
  104. img.addClass('black draggable');
  105. img.attr('src','src/img/pieces/blackPawn.jpg');
  106. sparePiecesBlack.append(img);
  107. $("#diceRoller").attr('disabled',true);
  108. };
  109. $('#'+container).append(sparePiecesBlack);
  110. };
  111. var row, cell,containerHeight,containerWidth;
  112. for (var i=0; i<10; i++){
  113. row = $('<tr></tr>').attr('id',i+1);
  114. for (var j=0; j<20; j++){
  115. cell = $('<td></td>');
  116. if ((j == 0 || j == 19) && (i >= 3) && (i <= 6)) {
  117. cell.addClass('behind-goal');
  118. } 
  119. else if ((j > 0) && (j < 19)){
  120. cell.attr('id',String.fromCharCode(j+96));
  121. cell.addClass("soccer-field");
  122. };
  123. row.append(cell);
  124. }
  125. board.append(row);
  126. }
  127. $('#'+container).append(board);
  128. if (gamePhase == 0) {
  129. var sparePiecesWhite = $('<div></div>').attr('id','spare-pieces-white'),img;
  130. sparePiecesWhite.addClass('drag-container');
  131. for (var i = 0; i < 5 ; i++) {
  132. img = $('<img>').attr('id',i+1);
  133. img.addClass('white draggable');
  134. img.attr('src','src/img/pieces/whitePawn.jpg');
  135. sparePiecesWhite.append(img);
  136. };
  137. $('#'+container).append(sparePiecesWhite);
  138. };
  139. };

  141. this.calculateHorizontalDistance = function (sq1,sq2) {
  142. var column1 = sq1.substring(0,1).charCodeAt(0);
  143. var column2 = sq2.substring(0,1).charCodeAt(0);
  144. return ( Math.abs(column1-column2) );
  145. };

  147. this.calculateVerticalDistance = function (sq1, sq2) {
  148. var row1 = parseInt(sq1.substring(1));
  149. var row2 = parseInt(sq1.substring(1));
  150. return ( Math.abs(row1-row2) );
  151. };

  153. this.calculateDistanceSquares = function(sq1, sq2){
  154. return(this.calculateVerticalDistance(sq1,sq2)+this.calculateHorizontalDistance(sq1,sq2));
  155. }

  157. }

CSS:

  2. #left table{
  3. border:0.2em solid black;
  4. border-collapse:collapse;
  5. }

  7. #left table tr{
  8. height: 2.5em;
  10. }

  12. #left table tr td{
  13. width: 3.33em;
  14. }


  17. td.soccer-field{
  18. border: 0.1em solid black;
  19. }

  21. td.behind-goal{
  22. background-color: #F8FAB4;
  23. }

  25. .selected-path.soccer-field, td[data-path="select-begin-path"],.hover-pawn.soccer-field{
  26. border: 0.15em solid #F8FAB4;
  27. }

  29. .actual-path.soccer-field{
  30. border: 0.15em solid #F72D48;
  31. }

  33. .drag-container img:hover {
  34. cursor: move;
  35. }

  37. .drag-container{
  38. display: inline-block;
  39. }

  41. img {
  42. width : 3.33em;
  43. height: 2.5em
  44. }
Any help will be really appreciated