Simulating IOS swipe to delete

[srkleiman]

I'd like to use Slide to emulate an IOS-style list with swipe left to reveal a red delete button. Before I do it myself, I was wondering if anyone knows of an implementation like that.

[mauron85]

Hi, definitely is doable :-)

Your markup should look like this:

    <ul class="slip-container">
        <li class="li-item">
            <div class="slide slide-1"></div>
            <div class="slide slide-2"><button class="btn-red">RED</button></div>
        </li>
    </ul>

And css

    .slip-container {
        width: 400px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: silver;
        list-style-type: none;
    }

    .li-item {
      position: relative;
      height: 50px;
      width: 200%; /* because we have actually two divs slide-1 and slide-2 */
    }

    .li-item-slide-2 {
        transform: translate(-50%,0);
    }

    .li-item-slide-2 .slide-2 {
        /*text-align: right;*/
    }

    .slide {
      position: relative;
      float: left;
      width: 50%;
      height: 100%;
    }

    .btn-red {
        margin-top: 15px;
        background: red;
    }

Then initialise slip normally:

        var li = document.querySelector('.li-item');
        var list = document.querySelector('.slip-container');
        new Slip(list);
        list.addEventListener('slip:swipe', function(e) {
            li.classList.toggle('li-item-slide-2');
        });

However to get right feeling you need to modify slip source code bit (basically remove velocity) Go to line: var swiped = velocity > 0.6 && move.time > 110 and replace it with:

                        // var swiped = velocity > 0.6 && move.time > 110;
                        var swiped = move.x > 175;

I've wrotten this from head, but it should work, as Iam using it like this in my project.

[srkleiman]

Thanks! Two questions:

Can I do this with table rows? I prefer tables since they make vertical alignment easy.

The IOS delete buttons are a fixed size less than the column width. How can I limit the left slide to that?

From: Marián Hello notifications@github.com Reply-To: pornel/slip <reply+002cab2033526c426d96dd1220b72a87952cf1bc48415aa592cf000000011122936d9 2a169ce03bf074b@reply.github.com> Date: Thursday, March 19, 2015 at 6:38 AM To: pornel/slip slip@noreply.github.com Cc: Steven Kleiman steven.kleiman@ieee.org Subject: Re: [slip] Simulating IOS swipe to delete (#44)

Hi, definitely is doable :-)

Your markup should look like this:

And css .li-item { position: relative; width: 200%; /* because we have actually two divs slide-1 and slide-2 */ padding: 0; border-top: none; overflow: hidden; }

.slide { position: relative; float: left; width: 50%; } Then initialise slip normally: var list = document.querySelector('slip-container'); new Slip(list); However to get right feeling you need to modify slip source code bit (basically remove velocity) Go to line: var swiped = velocity > 0.6 && move.time > 110 and replace it with: // var swiped = velocity > 0.6 && move.time > 110; var swiped = move.x > 175;

I've wrotten this from head, but it should work, as Iam using it like this in my project.

‹ Reply to this email directly or view it on GitHub https://github.com/pornel/slip/issues/44#issuecomment-83581975 .

[mauron85]

Hi,

I believe that tables should by ok too as long you're using overfow: hidden on li item. The width of table will be 200% and each column will be 50% same as with divs.

But answer to second question is bit tricky. To achieve that you will have to modify slip.js a lot. Maybe it will be better to implement it on your own (not using slip.js at all)

[mauron85]

Checkout this http://component.kitchen/components/tejitak/left-swipe-action

[kornelski]

Thanks for sharing your solutions.

[jiangtao]

Checkout this http://component.kitchen/components/tejitak/left-swipe-action

The Page is not found.