Consulta sobre Drag and Drop a una tabla

jopenz · #1 (**permalink**) 31/05/2012, 16:20

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<!DOCTYPE html>
<html>
    <head>
        <LINK rel="stylesheet" type="text/css" href="estilo.css"/>
        <LINK rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
        <LINK rel="stylesheet" type="text/css" href="jquery_ui/css/redmond/jquery-ui.css"/>
        <title></title> 
    </head>
    <body class="body">
        <div id="contenedor" class="mini-layout fluid"><!-- div contenedor -->
            <div id="contUno" class="content scrollMenu"><!-- div que contiene la lista Uno -->
                <h3>Operadores</h3>
                <div>
                    <div class="btn btn-mini btn-info">Leer</div>
                    <br>
                    <div class="btn btn-mini btn-info">Escribir</div>
                    <br>
                    <div class="btn btn-mini btn-info">Cargar</div>
                    <br>
                    <div class="btn btn-mini btn-info">Guardar</div>
                    <br>
                    <div class="btn btn-mini btn-info">Sumar</div>
                    <br>
                    <div class="btn btn-mini btn-info">Restar</div>
                    <br>
                    <div class="btn btn-mini btn-info">Saltar</div>
                    <br>
                    <div class="btn btn-mini btn-info">Saltar=0</div>
                    <br>
                    <div class="btn btn-mini btn-info">Saltar<0</div>
                    <br>
                    <div class="btn btn-mini btn-info">Fin</div>
                </div>
            </div>
            <div id="contDos" class="content"><!-- div que contiene la lista Dos -->
                <h3>Maquina</h3>               
                <table class="table table-condensed">
                    <tr>
                        <th>IP</th>
                        <th>Cont</th>
                    </tr>
                    <tr>
                        <td class="separador">0000</td>
                        <td class="insAqui"><div>Incerte aqui</div></td>
                    </tr>
                </table>
            </div>
            <div id="contTres" class="content scrollMenu"><!-- div que contiene la lista Tres -->
                <h3>Memoria</h3>
                <ul>
 
                </ul>
            </div>
        </div>
    </body>
</html>

el Javascript ...

Código Javascript:

Ver original<script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery_ui/js/jquery-ui.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
        <script type= "text/javascript">
            $(function(){
                var cont = 0;
                $('#contUno').find('div').find('div').draggable({
                    helper: 'clone',
                    appendTo: 'body'
                });
                $('#contDos').find('table').find('tr').find('.insAqui').droppable({
                    activeClass : 'ui-state-default',
                    hoverClass : 'ui-state-hover',
                    drop : function(event,ui){
                        $(this).children().remove();
                        $(this).append('<div class="btn btn-mini btn-info">'+ ui.draggable.text()+ '</div>');
                        $(this).parent().parent().append('<tr><td class="separador">' + (cont+1) + 
                            '</td><td class="insAqui"><div>Incerte aqui</div></td></tr>;');
                        cont+=1;
                    }
                });
                //---------------------------------------------------//
                var offset = $(".scrollMenu").offset();
                var topPadding = 305;
                $(window).scroll(function() {
                    if ($(window).scrollTop() > offset.top) {
                        $(".scrollMenu").stop().animate({
                            marginTop: $(window).scrollTop() - offset.top + topPadding
                        });
                    } else {
                        $(".scrollMenu").stop().animate({
                            marginTop: 0
                        });
                    };
                });
            
            });
        </script>

y la css por las dudas.

Código CSS:

Ver original.body{
    background: url(fondo.jpg);
    background-attachment: fixed;
}
#contenedor{
    height: 600px;
    margin: 60px auto;
    min-height: 100%;
    padding: 26px 14px 15px;
    position: relative;
    width: 744px;
    background: url(transparencia.png);
 
}
.SubContenedor{
    background-color: white;
    width: 100px;
    height:300px;
    margin-left: 10px;
}
#contUno{
    background-color: white;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    float: left;
    margin-bottom: 10px;
    padding: 19px;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    
}
#contDos{
    background-color: white;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    float: left;
    margin-left: 20px;
    padding: 15px;
    width: 418px;
}
#contDos table{
    margin-left: 30px;
    width: 130px;
}
#contDos table td{
    margin-left: 5px;
}
.separador{
    border-right: 1px solid #000000
}
#contTres{
    background-color: white;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    float: left;
    height: 240px;
    margin-left: 20px;
    padding: 15px;
    width: 85px;
}