unable to scroll on touch screen devices when the dndzone fills the page

[NotLatif]

Hi,

Touch input users are unable to scroll page when a dndzone fills it.

eg: https://www.youtube.com/shorts/mDiEBc7fLw0

Maybe an input delay would be a good workaround (you hold the item for x seconds before the drag action starts)

I tried doing it myself wrapping my dndzone in a <TouchDelayWrapper /> component made like this

<script>
    let touchTimeout;
    export let isDraggable = false;
    
    function handleTouchStart() {
      touchTimeout = setTimeout(() => {
        isDraggable = true;
        console.log('Touch hold');
      }, 500);
    }
  
    function handleTouchEnd() {
      clearTimeout(touchTimeout);
      isDraggable = false;
    }
  </script>
  
  <div 
    on:touchstart={handleTouchStart}
    on:touchend={handleTouchEnd}
    on:touchcancel={handleTouchEnd}
    style="touch-action: {isDraggable ? 'none' : 'pan-y pinch-zoom'}"
  >
    <slot {isDraggable}></slot>
  </div>

but I could not seem to find a way to update my dndzone reactively

<script>
  //...bla bla bla
  let parentDraggable = false;
</script>

<TouchDelayWrapper bind:isDraggable={parentDraggable}>

  <!-- this updates reactively -->
  <h1>{parentDraggable}</h1> 

  <!-- this does not -->
  <div use:dndzone={{items, flipDuration, dragDisabled: !parentDraggable}}>
      
  </div>
</TouchDelayWrapper>

[isaacHagoel]

Would be great if you could make a minimal REPL for me to have a look at. Thx

…

On Wed, Nov 13, 2024, 08:47 Latif ***@***.***> wrote: Hi, Touch input users are unable to scroll page when a dndzone fills it. eg: https://www.youtube.com/shorts/mDiEBc7fLw0 Maybe an input delay would be a good workaround (you hold the item for x seconds before the drag action starts) I tried doing it myself wrapping my dndzone in a <TouchDelayWrapper /> component made like this <script> let touchTimeout; export let isDraggable = false; function handleTouchStart() { touchTimeout = setTimeout(() => { isDraggable = true; console.log('Touch hold'); }, 500); } function handleTouchEnd() { clearTimeout(touchTimeout); isDraggable = false; } </script> <div on:touchstart={handleTouchStart} on:touchend={handleTouchEnd} on:touchcancel={handleTouchEnd} style="touch-action: {isDraggable ? 'none' : 'pan-y pinch-zoom'}" > <slot {isDraggable}></slot> </div> but I could not seem to find a way to update my dndzone reactively <script> //...bla bla bla let parentDraggable = false;</script> <TouchDelayWrapper bind:isDraggable={parentDraggable}> <!-- this updates reactively --> <h1>{parentDraggable}</h1> <!-- this does not --> <div use:dndzone={{items, flipDuration, dragDisabled: !parentDraggable}}> </div> </TouchDelayWrapper> — Reply to this email directly, view it on GitHub <#613>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC4G2AO6V3PCQY6GH3L2AJZNNAVCNFSM6AAAAABRVA5MVCVHI2DSMVQWIX3LMV43ASLTON2WKOZSGY2TGNBRGUZDSOI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[NotLatif]

thanks for the quick response,

here: https://svelte.dev/playground/57847eba179f4fd1ae736fc4554c0700?version=3.59.2

try to scroll through the list using touch input

[NotLatif]

Ok so I was able to find this example REPL
but it didn't handle touch inputs, so I edited it REPL if someone needs it

It's not perfect but it's fine for now

Issues with my REPL (skill issue)

• text tries to gets selected on mobile for long presses,
• sometimes the page scrolls with the item you're dragging)

I'll maybe come back another day to fix those

(maybe my use case is too specific) but otherwise it would be nice if svelte-dnd-action handled this someway for touch input users

[isaacHagoel]

Hi, Thanks for the repl. Why not leave some room next to that the user can use to scroll the page (common pattern)?

…

On Wed, Nov 13, 2024 at 10:47 AM Latif ***@***.***> wrote: Ok so I was able to find this example REPL <https://svelte.dev/playground/7e28249932d84d59a9d01504bf14417e?version=3.44.3> but it didn't handle touch inputs, so I edited it REPL if someone needs it <https://svelte.dev/playground/f56bb9929209473db4b5522d1e6c907b?version=3.44.3> It's not perfect but it's fine for now Issues with my REPL (skill issue) - text tries to gets selected on mobile for long presses, - sometimes the page scrolls with the item you're dragging) I'll maybe come back another day to fix those (maybe my use case is too specific) but otherwise it would be nice if svelte-dnd-action handled this someway for touch input users — Reply to this email directly, view it on GitHub <#613 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC3QBAPAZ2ZUYZBLTO32AKHR7AVCNFSM6AAAAABRVA5MVCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINZRHA3TGMBUHA> . You are receiving this because you commented.Message ID: ***@***.***>

[NotLatif]

that's what I'm currently doing, it just looks better when it's full page wide for my current layout (yt shorts example)