Direction 'horizontal' onDrag down bug

[stubbies]

You can see the bug if you pull the page down in the demo. http://stereobit.github.io/dragend/

I guess this only happens on horizontal direction.

[Stereobit]

Damned. Will check ...

[stubbies]

It doesn't happen on 1st element.

[Stereobit]

Fixed. Thanks for noticing :-).

[netpoetica]

@Stereobit - I am curious if you could add a reference to the commit that fixed this issue. I am having to modify your library for a specific use case and my modifications have introduced this bug where swiping "down" in horizontal mode causes a strange redraw/reorientation, and I am curious if the fix for this bug might help diagnose the issue.

[Stereobit]

Hmm I don't think that it this would help you. Too much has changed since this bug was fixed. Could you describe your use case a bit more? Maybe I can help you with it or add the features you need.

[netpoetica]

@Stereobit I have branched off of dragend to create a "fullscreen" version with nestable, bidirectional columns and rows. I use a drag threshold to determine which direction the user wants to move, and then if they are going "opposite" of this.settings.direction, emit an event to tell the opposite dragend instance to move in specified direction (transmitted via event).

The makrup looks like this:

  <div id="demo">
    <ul>
      <li class="first dragend-page"><p>Page 1a</p></li>
      <li class="dragend-page"><p>Page 2a</p></li>
      <li class="middle dragend-page">
        <div class='dragend-expand'>
          <ul>
            <li class='dragend-page'><p>Page 3a</p></li>
            <li class='dragend-page'><p>Page 3b</p></li>
            <li class='dragend-page dragend-middle'><p>Page 3c</p></li>
            <li class='dragend-page'><p>Page 3d</p></li>
            <li class='dragend-page'><p>Page 3e</p></li>
          </ul>
        </div>
      </li>
      <li class="dragend-page"><p>Page 4a</p></li>
      <li class="last dragend-page">
        <div class='dragend-expand'>
          <ul>
            <li class='dragend-page'><p>Page 5a</p></li>
            <li class='dragend-page dragend-middle'><p>Page 5b</p></li>
            <li class='dragend-page'><p>Page 5c</p></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>

The problem is that when I drag to page 2 (swipe left), if I then swipe "down" on page 2 (which technically shouldn't do anything at all because this is not a vertical dragend instance), the setStyle function seems to want to redraw the dragend instance, which causes it to go back to page 1 for a second - technically because this page is a not a vertical nested dragend, nothing at all should happen, but I think you use setStyles() to lock the current page back in place on dragEnd(). See video: https://www.dropbox.com/s/24h4bbjvmesu9ob/dragend-reset.m4v

I mean most likely it is my own code causing this problem, but maybe you have insight into this. I can clean up my code a little and possibly post more a little later, will keep you up to date. Thanks