Hacer Pregunta

Conecta

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?

preguntó
Móvil
605 Vistas
2 Respuestas
solucionada

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!

por chirola30 (1.180 puntos) en Móvil
editado por

2 Respuestas

2votos

white Puntos75880

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/

por white (75.880 puntos)
seleccionada por

1voto

Leonardo-Tadei Puntos227320

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 Leonardo-Tadei (227.320 puntos)

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

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

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

Etiquetas

Categorías

Conecta