haltu / muuri

Infinite responsive, sortable, filterable and draggable layouts
https://muuri.dev
MIT License
10.8k stars 643 forks source link

Can not implement with Ionic 5 #482

Closed jsBiztech closed 3 years ago

jsBiztech commented 3 years ago

Hi, I have been trying to use this library with Ionic 5 for a week now.

Setup & config:

I have faced the following issues so far:

Please, if anyone can share an Ionic project with this library or help fix these issues.

jsBiztech commented 3 years ago

@niklasramo , Can you please share any demo or any suggestions to fix the issues in angular at least?

niklasramo commented 3 years ago

@nagdevbharat I haven't used Muuri with Angular or Ionic myself so can't help off the top of my head. If you have specific problems I suggest to create separate issues and provide reduced test case of each issue (in e.g. codepen/codesandbox). That way it will be much easier for anyone to help you out :)

jsBiztech commented 3 years ago

@niklasramo , I have created an issue related to scrolling https://github.com/haltu/muuri/issues/483 That is the major one which i was not able to fix so far. please help me on that one.

jsBiztech commented 3 years ago

Eventually, I fixed issues related to the implementation with ionic

Look into the below grid options I have used to make it work

{
      layoutOnInit: false,
      dragEnabled: true,
      dragHandle: '.drag-handler',
      dragStartPredicate: () => {
        return this.dragEnabled;
      },
      dragCssProps: {
        touchAction: 'pan-y',
        userSelect: '',
        userDrag: '',
        tapHighlightColor: '',
        touchCallout: '',
        contentZooming: ''
      },
      dragContainer: document.getElementById('dragContainer'),
      layout: {
        fillGaps: true
      },
      dragAutoScroll: {
        targets: [
          {
            element: this.content.getScrollElement(),
            priority: 1,
            axis: Muuri.AutoScroller.AXIS_Y
          }
        ],
        handle: null,
        threshold: 40,
        safeZone: 0.1,
        speed: Muuri.AutoScroller.smoothSpeed(2000, 2700, 3200),
        sortDuringScroll: true,
        smoothStop: false,
      }
    };

Also, one can look into the given stackblitz url, which has complete implementation with Ionic: https://stackblitz.com/edit/ionic-mwjdis?

niklasramo commented 3 years ago

Alrighty, this issue seems resolved, so closing for now.