feat: ion-modal sheet allow disabling moving on content drag #30064

Activity

1. ionitron-bot

   added

   triage

   on Dec 6, 2024
2. thetaPC commented on Oct 1, 2026

   

   thetaPC

   on Oct 1, 2026

   Contributor

   More actions

   Thanks for the report, and sorry for the delay.

   Verified on 9.0.6. This is already possible without a new option. The sheet gesture starts from touchstart and mousedown events that bubble up from the content, so stopping those two events on the resizer's element keeps the sheet in place while the image is dragged. The handle and the rest of the content still move the sheet as usual. CSS can't do this, since the drag is handled in JavaScript and touch-action: none doesn't affect it. Stopping pointerdown doesn't work either, because the sheet doesn't listen for pointer events.

   <ion-modal id="sheet">
     <ion-content>
       <div id="image-resizer"><!-- your resizer library mounts here --></div>
     </ion-content>
   </ion-modal>
   
   <script>
     const modal = document.querySelector('#sheet');
     modal.breakpoints = [0, 0.5, 1];
     modal.initialBreakpoint = 0.5;
   
     const resizer = document.querySelector('#image-resizer');
     const stopSheetDrag = (ev) => ev.stopPropagation();
     resizer.addEventListener('touchstart', stopSheetDrag);
     resizer.addEventListener('mousedown', stopSheetDrag);
   </script>

   If you'd rather the sheet only move from its handle, add the same two listeners to the ion-content instead.

   Since the current API covers this, we're closing it as a feature request. The missing docs are tracked in ionic-team/ionic-docs#4765.
3. thetaPC

   closed this as not plannedon Oct 1, 2026