entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Como puedo deslizar un <tr> para que aparezca la opción de borrar?

Hola amigos, hoy vengo con un problema que le estoy dando manija hace que muchos dias, estoy haciendo una web app hace tiempo, y siempre he querido poner esta animación para borrar items desde una tabla de datos, he trabajado con css3 html5 pero no hay forma de poner una capa en sima de la otra en los que las <tr> se respecta, ya el jquery lo tengo lo del deslizamiento, pero el problema radica en el css con los comandos de possition: fixed; y possition: absolute;

si me pueden ayudar se los agradeceria mucho... aca abajo les dejo mas o menos la imagen de lo que quiero...

https://www.dropbox.com/s/5p30vigge4z5sed/delete.png?dl=0

GRACIAS!

2 Respuestas

2votos

white Puntos75840

Hice un código de ejemplo en jsfiddle, podría ser lo que buscas?

https://jsfiddle.net/5kj9mh3L/embedded/result/
https://jsfiddle.net/5kj9mh3L/

El código en cuestión:

function swipe_table()
{
    'use strict';

    var desired_table_width = 0;

    $('.list-view tr td').each(function(){
        desired_table_width = Math.max($(this).find('.wrapper').outerWidth(true), desired_table_width);
    });

    $('.list-view tr td').each(function(){

        var drag = false,
            drag_pos = 0,
            wrapper = $(this).find('.wrapper'),
            deleted = false;

        $(this).find('.delete').css({
            width  : $(wrapper).width(),
            height : $(wrapper).height()
        });

        $(this).on('mousedown', '.wrapper', function(event){
            drag = true;
            drag_pos = event.pageX;
        });

        $(this).on('mouseup mouseleave', '.wrapper', function(event){

            if( deleted )
                return false;

            drag = false;

            var is_swipped = ((event.pageX - drag_pos) <= -($(wrapper).width() / 2));

            $(wrapper)
                .removeClass('drag')
                .animate({
                    'left' : 0
                });
        });

        $('body').on('mousemove', $(this).find('.wrapper'), function(event){

            if(drag && !deleted)
            {
                var swipe_pos = event.pageX - drag_pos;

                if(swipe_pos > 0)
                    return false;

                if( swipe_pos <= -($(wrapper).width() / 2) )
                {
                    $(wrapper).animate(
                    {
                        left : -$(wrapper).outerWidth()
                    }, 500);

                    $(wrapper).parent('td').find('.delete strong').html('Eliminado!');

                    deleted = true;
                }
                else
                {
                    $(wrapper)
                        .addClass('drag')
                        .css({
                            left : swipe_pos
                        });
                }
            }
        });

    });
}

$(document).ready(swipe_table);

**UPDATE** he actualizado el código para que trabaje con Jquery Mobile**

https://jsfiddle.net/0qs76g0p/2/
https://jsfiddle.net/0qs76g0p/2/embedded/result/

1voto

Leonardo-Tadei Puntos227020

Hola @chirola30,

estos estilos solucinan tu problema:

<html>
<head>
<style>
.b{
    position:absolute;
    right:0;
    background-color:red;
    width: 5px;
    overflow: auto;
    z-index:100;
}
.texto{
    float:left;
    background-color:yellow;
}
td{
    width: 100px;
}
</style>
<script>
function mas(){
    var a = parseInt(document.getElementById('borrar1').style.width);
    document.getElementById('borrar1').style.width = a+10+'px';
}

function menos(){
    var a = parseInt(document.getElementById('borrar1').style.width);
    document.getElementById('borrar1').style.width = a-10+'px';
}
</script>
</head>
<body>
<table>
    <tr>
        <td>
            <div class="texto">un texto</div>
            <div id="borrar1" class="b" style="width:5px;">borrar</div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="texto">un texto</div>
            <div id="borrar2" class="b" width="5px">borrar</div>
        </td>
    </tr>
</table>

<a href="javascript:mas();">+</a> <a href="javascript:menos();">-</a>
<body>

Yo puse una función muy básica para probar que al moverse se logre el efecto. Vos tenés que usar la función que ya estás usando para conseguir que se deslice el DIV.

Saludos cordiales!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta