Foros del Web » Programando para Internet » Jquery »

Drag and drop no funciona correctamente

 Estas en el tema de Drag and drop no funciona correctamente en el foro de Jquery en Foros del Web. Estoy haciendo una pequeña utilidad para arrastrar unas imágenes a las celdas de una tabla, todo funciona bien hasta el momento que suelto la imagen ...
  #1 (permalink)  
Antiguo 06/06/2015, 16:35
 
Fecha de Ingreso: junio-2015
Mensajes: 1
Antigüedad: 9 años, 5 meses
Puntos: 0
Drag and drop no funciona correctamente
Estoy haciendo una pequeña utilidad para arrastrar unas imágenes a las celdas de una tabla, todo funciona bien hasta el momento que suelto la imagen en la celda de mi
eleccion, la imagen aparece en un lugar totalmente diferente al cual había seleccionado. He estado dando vueltas a la web y no encuentro solución. Aqui esta el codigo:

HTML

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

Javascript:

Código Javascript: 
Ver original
  1. $(function() {
  2.     $('td.soccer-field').click(function(){
  3.             if ($('#dice1').text() != '' && $('#dice2').text() != '') {
  4.                 if ($('td[data-path="begin-path"]').length == 0) {
  5.                     $(this).attr('data-path','begin-path');
  6.                     $(this).off('mouseenter mouseleave');
  7.                     $(this).addClass('selected-path');
  8.                 } else if ($('td[data-path="begin-path"]').length && $(this).attr('data-path') != 'begin-path' && $('td[data-path="end-path"]').length == 0){
  9.                     $(this).attr('data-path','end-path');
  10.                     $(this).addClass('actual-path');
  11.                     $('.selected-path').addClass('actual-path');
  12.                     $('.actual-path').removeClass('selected-path');
  13.                     } else if ($(this).attr('data-path') == 'end-path'){
  14.                     $(this).removeAttr('data-path');
  15.                     $('.actual-path').addClass('selected-path');
  16.                     $('.selected-path').removeClass('actual-path');
  17.                 }; 
  18.             }
  19.         });
  20.  
  21.  
  22.     $('div.soccer-field').hover(
  23.         function () {
  24.             if ($('#dice1').text() != '' && $('#dice2').text() != '') {
  25.                 if ($('td[data-path="begin-path"]').length == 0) {
  26.                     $(this).attr('data-path','select-begin-path');
  27.                 } else if($(this).attr('data-path') != 'begin-path'){
  28.                     var presentCell = $(this).attr('id') + $(this).parent().attr('id');
  29.                     var cell;
  30.                     if ($(this).attr('data-path') == 'ending') {
  31.                         $('.selected-path').each(function(){
  32.                             cell = $(this).attr('id') + $(this).parent().attr('id');
  33.                             distance = new Board().calculateDistanceSquares(presentCell,cell);
  34.                             if (distance == 1 ){
  35.                                 $('div[data-path="ending"]').removeClass('selected-path');
  36.                                 $('div[data-path="ending"]').removeAttr('data-path');
  37.                                 if ($(this).attr('data-path') != 'begin-path')
  38.                                 {
  39.                                     $(this).attr('data-path','ending');
  40.                                 }
  41.                                 return;
  42.                             }
  43.                         });
  44.                     }else if ($('td[data-path="end-path"]').length == 0){
  45.                         var actualCell =$(this);
  46.                         var dicesResult = parseInt($('#dice1').text()) + parseInt($('#dice2').text());
  47.                         $('.selected-path').each(function(){
  48.                             cell = $(this).attr('id') + $(this).parent().attr('id');
  49.                             distance = new Board().calculateDistanceSquares(presentCell,cell);
  50.                             if (distance == 1 && $('.selected-path').length <= (dicesResult -1)){
  51.                                 actualCell.attr('data-path','ending');
  52.                                 actualCell.addClass('selected-path');
  53.                                 if ($(this).attr('data-path') != 'begin-path') {
  54.                                     $(this).removeAttr('data-path');
  55.                                 };
  56.                                 return ;
  57.                             }
  58.                         });
  59.                     }
  60.                 }
  61.             }
  62.         },function () {
  63.             if ( $(this).attr('data-path') == "select-begin-path") {
  64.                     $(this).removeAttr('data-path');
  65.             }
  66.         });
  67.  
  68.     $('#diceRoller').click(function() {
  69.         $('#dice1').text(Math.floor(Math.random()*6)+1);
  70.         $('#dice2').text(Math.floor(Math.random()*6)+1);
  71.         $(this).attr('disabled',true);
  72.     });
  73.  
  74.     $('.drag-container img.draggable').draggable({
  75.         cursor : 'move',
  76.         revert: 'invalid',
  77.         refreshPositions : true,
  78.         opacity: .45,
  79.         delay : 50
  80.     });
  81.  
  82.     $('#board .soccer-field').droppable({
  83.         accept: '.drag-container img.draggable',
  84.         hoverClass: 'hover-pawn',
  85.         drop: function(event, ui){
  86.             $(this).html(ui.draggable);
  87.             ui.draggable.draggable("option","disabled",true);
  88.         }
  89.     });
  90. });
  91.  
  92. //function Board(playerTurn, piecesPosition, gamePhase, gameBegginingType, container)
  93. function Board(){
  94.     this.buildBoard = function  (container,gamePhase,playerTurn) {
  95.         var playerTurn = playerTurn;
  96.         var gamePhase = gamePhase;
  97.         var board = $('<table></table>').attr('id','board');
  98.         if (gamePhase == 0) {
  99.             var sparePiecesBlack = $('<div></div>').attr('id','spare-pieces-black'),img;
  100.             sparePiecesBlack.addClass('drag-container');
  101.             for (var i = 0; i < 5 ; i++) {
  102.                 img = $('<img>').attr('id',i+1);
  103.                 img.addClass('black draggable');
  104.                 img.attr('src','src/img/pieces/blackPawn.jpg');
  105.                 sparePiecesBlack.append(img);
  106.                 $("#diceRoller").attr('disabled',true);
  107.             };
  108.             $('#'+container).append(sparePiecesBlack);
  109.         };
  110.         var row, cell,containerHeight,containerWidth;
  111.         for (var i=0; i<10; i++){
  112.             row = $('<tr></tr>').attr('id',i+1);
  113.             for (var j=0; j<20; j++){
  114.                 cell = $('<td></td>');
  115.                 if ((j == 0 || j == 19) && (i >= 3) && (i <= 6)) {
  116.                     cell.addClass('behind-goal');
  117.                 } 
  118.                 else if ((j > 0) && (j < 19)){
  119.                     cell.attr('id',String.fromCharCode(j+96));
  120.                     cell.addClass("soccer-field");
  121.                 };
  122.                 row.append(cell);
  123.             }
  124.             board.append(row);
  125.         }
  126.         $('#'+container).append(board);
  127.         if (gamePhase == 0) {
  128.             var sparePiecesWhite = $('<div></div>').attr('id','spare-pieces-white'),img;
  129.             sparePiecesWhite.addClass('drag-container');
  130.             for (var i = 0; i < 5 ; i++) {
  131.                 img = $('<img>').attr('id',i+1);
  132.                 img.addClass('white draggable');
  133.                 img.attr('src','src/img/pieces/whitePawn.jpg');
  134.                 sparePiecesWhite.append(img);
  135.             };
  136.             $('#'+container).append(sparePiecesWhite);
  137.         };
  138.     };
  139.  
  140.     this.calculateHorizontalDistance = function (sq1,sq2) {
  141.         var column1 = sq1.substring(0,1).charCodeAt(0);
  142.         var column2 = sq2.substring(0,1).charCodeAt(0);
  143.         return ( Math.abs(column1-column2) );
  144.     };
  145.  
  146.     this.calculateVerticalDistance = function (sq1, sq2) {
  147.         var row1 = parseInt(sq1.substring(1));
  148.         var row2 = parseInt(sq1.substring(1));
  149.         return ( Math.abs(row1-row2) );
  150.     };
  151.  
  152.     this.calculateDistanceSquares = function(sq1, sq2){
  153.         return(this.calculateVerticalDistance(sq1,sq2)+this.calculateHorizontalDistance(sq1,sq2));
  154.     }
  155.  
  156. }

CSS:
Código CSS: 
Ver original
  1. #left table{
  2.     border:0.2em solid black;
  3.     border-collapse:collapse;
  4. }
  5.  
  6. #left table tr{
  7.     height: 2.5em;
  8.     
  9. }
  10.  
  11. #left table tr td{
  12.     width: 3.33em;
  13. }
  14.  
  15.  
  16. td.soccer-field{
  17.     border: 0.1em solid black;
  18. }
  19.  
  20. td.behind-goal{
  21.     background-color: #F8FAB4;
  22. }
  23.  
  24. .selected-path.soccer-field, td[data-path="select-begin-path"],.hover-pawn.soccer-field{
  25.     border: 0.15em solid #F8FAB4;
  26. }
  27.  
  28. .actual-path.soccer-field{
  29.     border: 0.15em solid #F72D48;
  30. }
  31.  
  32. .drag-container img:hover {
  33.     cursor: move;
  34. }
  35.  
  36. .drag-container{
  37.     display: inline-block;
  38. }
  39.  
  40. img {
  41.     width : 3.33em;
  42.     height: 2.5em
  43. }

Por cierto ya intente hacerlo con divs y obtuve el mismo resultado. Muchas gracias de antemano
Última edición por devkev95; 06/06/2015 a las 16:55 Razón: Olvide comentar algo

Etiquetas: jqueryui
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:25.