Tema: Consulta sobre Drag and Drop a una tabla
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 31/05/2012, 16:20
jopenz
 
Fecha de Ingreso: mayo-2012
Mensajes: 2
Antigüedad: 11 años, 10 meses
Puntos: 0
Pregunta Consulta sobre Drag and Drop a una tabla
Hola soy nuevo en el foro y desde ya quería agradecerle la ayuda, tengo un problema con el drag and drop de un div a una celda de una tabla, el problema esa en que solo me deja arrastrar a la primer celda, luego me deja sobrescribirla, pero no me deja agregar mas objetos a la lista ... solo el primero ... se que tengo un error en la parte que defino las clases a donde puedo arrastrar, les dejo el código para ver si alguien puede echarme una mano

estoy usando jquery, jquery-ui , bootstrap


aca el HTML se los dejo separado al Javascript para que sea mas entendible

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <LINK rel="stylesheet" type="text/css" href="estilo.css"/>
  5.         <LINK rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
  6.         <LINK rel="stylesheet" type="text/css" href="jquery_ui/css/redmond/jquery-ui.css"/>
  7.         <title></title> 
  8.     </head>
  9.     <body class="body">
  10.         <div id="contenedor" class="mini-layout fluid"><!-- div contenedor -->
  11.             <div id="contUno" class="content scrollMenu"><!-- div que contiene la lista Uno -->
  12.                 <h3>Operadores</h3>
  13.                 <div>
  14.                     <div class="btn btn-mini btn-info">Leer</div>
  15.                     <br>
  16.                     <div class="btn btn-mini btn-info">Escribir</div>
  17.                     <br>
  18.                     <div class="btn btn-mini btn-info">Cargar</div>
  19.                     <br>
  20.                     <div class="btn btn-mini btn-info">Guardar</div>
  21.                     <br>
  22.                     <div class="btn btn-mini btn-info">Sumar</div>
  23.                     <br>
  24.                     <div class="btn btn-mini btn-info">Restar</div>
  25.                     <br>
  26.                     <div class="btn btn-mini btn-info">Saltar</div>
  27.                     <br>
  28.                     <div class="btn btn-mini btn-info">Saltar=0</div>
  29.                     <br>
  30.                     <div class="btn btn-mini btn-info">Saltar<0</div>
  31.                     <br>
  32.                     <div class="btn btn-mini btn-info">Fin</div>
  33.                 </div>
  34.             </div>
  35.             <div id="contDos" class="content"><!-- div que contiene la lista Dos -->
  36.                 <h3>Maquina</h3>               
  37.                 <table class="table table-condensed">
  38.                     <tr>
  39.                         <th>IP</th>
  40.                         <th>Cont</th>
  41.                     </tr>
  42.                     <tr>
  43.                         <td class="separador">0000</td>
  44.                         <td class="insAqui"><div>Incerte aqui</div></td>
  45.                     </tr>
  46.                 </table>
  47.             </div>
  48.             <div id="contTres" class="content scrollMenu"><!-- div que contiene la lista Tres -->
  49.                 <h3>Memoria</h3>
  50.                 <ul>
  51.  
  52.                 </ul>
  53.             </div>
  54.         </div>
  55.     </body>
  56. </html>

el Javascript ...

Código Javascript: 
Ver original
  1. <script type="text/javascript" src="jquery.js"></script>
  2.         <script type="text/javascript" src="jquery_ui/js/jquery-ui.js"></script>
  3.         <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
  4.         <script type= "text/javascript">
  5.             $(function(){
  6.                 var cont = 0;
  7.                 $('#contUno').find('div').find('div').draggable({
  8.                     helper: 'clone',
  9.                     appendTo: 'body'
  10.                 });
  11.                 $('#contDos').find('table').find('tr').find('.insAqui').droppable({
  12.                     activeClass : 'ui-state-default',
  13.                     hoverClass : 'ui-state-hover',
  14.                     drop : function(event,ui){
  15.                         $(this).children().remove();
  16.                         $(this).append('<div class="btn btn-mini btn-info">'+ ui.draggable.text()+ '</div>');
  17.                         $(this).parent().parent().append('<tr><td class="separador">' + (cont+1) + 
  18.                             '</td><td class="insAqui"><div>Incerte aqui</div></td></tr>;');
  19.                         cont+=1;
  20.                     }
  21.                 });
  22.                 //---------------------------------------------------//
  23.                 var offset = $(".scrollMenu").offset();
  24.                 var topPadding = 305;
  25.                 $(window).scroll(function() {
  26.                     if ($(window).scrollTop() > offset.top) {
  27.                         $(".scrollMenu").stop().animate({
  28.                             marginTop: $(window).scrollTop() - offset.top + topPadding
  29.                         });
  30.                     } else {
  31.                         $(".scrollMenu").stop().animate({
  32.                             marginTop: 0
  33.                         });
  34.                     };
  35.                 });
  36.             
  37.             });
  38.         </script>


y la css por las dudas.

Código CSS: 
Ver original
  1. .body{
  2.     background: url(fondo.jpg);
  3.     background-attachment: fixed;
  4. }
  5. #contenedor{
  6.     height: 600px;
  7.     margin: 60px auto;
  8.     min-height: 100%;
  9.     padding: 26px 14px 15px;
  10.     position: relative;
  11.     width: 744px;
  12.     background: url(transparencia.png);
  13.  
  14. }
  15. .SubContenedor{
  16.     background-color: white;
  17.     width: 100px;
  18.     height:300px;
  19.     margin-left: 10px;
  20. }
  21. #contUno{
  22.     background-color: white;
  23.     border-radius: 8px 8px 8px 8px;
  24.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  25.     float: left;
  26.     margin-bottom: 10px;
  27.     padding: 19px;
  28.     display: block;
  29.     -webkit-margin-before: 1em;
  30.     -webkit-margin-after: 1em;
  31.     -webkit-margin-start: 0px;
  32.     -webkit-margin-end: 0px;
  33.     
  34. }
  35. #contDos{
  36.     background-color: white;
  37.     border-radius: 8px 8px 8px 8px;
  38.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  39.     float: left;
  40.     margin-left: 20px;
  41.     padding: 15px;
  42.     width: 418px;
  43. }
  44. #contDos table{
  45.     margin-left: 30px;
  46.     width: 130px;
  47. }
  48. #contDos table td{
  49.     margin-left: 5px;
  50. }
  51. .separador{
  52.     border-right: 1px solid #000000
  53. }
  54. #contTres{
  55.     background-color: white;
  56.     border-radius: 8px 8px 8px 8px;
  57.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  58.     float: left;
  59.     height: 240px;
  60.     margin-left: 20px;
  61.     padding: 15px;
  62.     width: 85px;
  63. }
Última edición por jopenz; 31/05/2012 a las 17:19