Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flickering of last item if items have different widths #1686

Closed
vanBrakel opened this issue Nov 17, 2019 · 9 comments
Closed

Flickering of last item if items have different widths #1686

vanBrakel opened this issue Nov 17, 2019 · 9 comments
Labels
enhancement Quality of life changes to existing features

Comments

@vanBrakel
Copy link

Problem:

When using a grid that contains items of different widths, a flickering issue occurs when dragging the last element of the last row. Dragging any other element seems to work fine. This issue appears both on Chrome (78.0.3904.97), Firefox (69.0.1) and IE Edge (44.18362.449.0). Funnily enough, it doesn't appear on IE (11.476.18362.0).

JSFiddle demonstrating the problem: https://jsfiddle.net/qu4ntyl/y63259qv/

example
@owen-m1 owen-m1 added the enhancement Quality of life changes to existing features label Feb 16, 2020
@owen-m1
Copy link
Member

owen-m1 commented Feb 16, 2020

I knew this case was possible, but I didn't solve it because I didn't think anyone would find it 😄

@dzero1
Copy link

dzero1 commented Apr 22, 2021 •
edited
Loading

Having similar problem to this. Any solution?

In my case I guess this happen becase of the placeholder underneath. Check this out

I this case, each "SEED X" item is a sortablejs object. So there will be only one item inside and it'll be the last always.

@EtienneTLM
Copy link

Same issue. In my case it happens randomly, no regard to the item level.

Demo
https://user-images.githubusercontent.com/18191493/124004508-14b2e900-d9a6-11eb-94e2-42a13ead1506.mp4

Initialization
image

Any solution?

@sabuz
Copy link

sabuz commented Feb 21, 2022 •
edited
Loading

@owen-m1 Any update?

@ayushm-agrawal
Copy link

@RubaXa @owen-m1 I am still seeing this issue. Happens when elements have different heights as well. I have forceFallback: true as well. Would really love to get a solution for this

@sabuz
Copy link

sabuz commented Sep 8, 2022

I got a solution. You'll have to add a hidden item at the end, and then disable drop after and sort for that hidden item.

@ayushm-agrawal
Copy link

@sabuz Do you mind creating a quick fiddle with this solution?

@ajacquierbret
Copy link

ajacquierbret commented Jun 29, 2023 •
edited
Loading

Hey folks, it seems to occur because of the threshold of the swap zone. I think this issue must be solved internally, but while there's no fix, try to set the swapThreshold option to something less than 1. By decreasing this option's value (as explained here) little by little, you will see the flicker/jumps happening less and less, until the chances that a user triggers the issue becomes acceptable. For me, setting swapThreshold: 0.5 completely "fixes" the issue.

My two cents guess is that on some configurations, two swap zones overlap each other, triggering multiple swaps at the same time in an infinite loop.

owen-m1 added a commit that referenced this issue Nov 30, 2023
@owen-m1
#1686: Use parent rect in ghostIsLast & ghostIsFirst
70bf738
@owen-m1
Copy link
Member

owen-m1 commented Nov 30, 2023

Sorry this took so long to fix. It should be fixed in 1.15.1.

@owen-m1 owen-m1 closed this as completed Nov 30, 2023
@dertuxmalwieder dertuxmalwieder mentioned this issue Jan 4, 2024
Open
@snyk-io snyk-io bot mentioned this issue May 21, 2024
Open
@nathonius nathonius mentioned this issue May 24, 2024
Open
@nathonius nathonius mentioned this issue Sep 7, 2024
Open
@zhibx zhibx mentioned this issue Sep 7, 2024
Open
@nathonius nathonius mentioned this issue Sep 23, 2024
Open
@shinehs shinehs mentioned this issue Oct 12, 2024
Open
@d3sca d3sca mentioned this issue Oct 25, 2024
Open
newkdr added a commit to newkdr/vscode-gitlens that referenced this issue Dec 12, 2024
@newkdr
[Snyk] Upgrade sortablejs from 1.15.0 to 1.15.3 (#5)
1ef2031 
![snyk-top-banner](https://redirect.github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123)


<h3>Snyk has created this PR to upgrade sortablejs from 1.15.0 to
1.15.3.</h3>

:information_source: Keep your dependencies up-to-date. This makes it
easier to fix existing vulnerabilities and to more quickly identify and
fix newly disclosed vulnerabilities when they affect your project.

<hr/>


- The recommended version is **3 versions** ahead of your current
version.

- The recommended version was released on **3 months ago**.



<details>
<summary><b>Release notes</b></summary>
<br/>
  <details>
    <summary>Package name: <b>sortablejs</b></summary>
    <ul>
      <li>
<b>1.15.3</b> - <a
href="https://redirect.github.com/SortableJS/Sortable/releases/tag/1.15.3">2024-09-01</a></br><ul>
<li>Expose <code>expando</code> value in
<code>Sortable.utils</code></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="2134996369" data-permission-text="Title is private"
data-url="SortableJS/Sortable#2346"
data-hovercard-type="issue"
data-hovercard-url="/SortableJS/Sortable/issues/2346/hovercard"
href="https://redirect.github.com/SortableJS/Sortable/issues/2346">#2346</a>:
Fix inability to drag in fallback when handle has a shadowRoot</li>
<li>Include src folder in NPM package</li>
</ul>
      </li>
      <li>
<b>1.15.2</b> - <a
href="https://redirect.github.com/SortableJS/Sortable/releases/tag/1.15.2">2024-01-14</a></br><ul>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="2053450032" data-permission-text="Title is private"
data-url="SortableJS/Sortable#2339"
data-hovercard-type="issue"
data-hovercard-url="/SortableJS/Sortable/issues/2339/hovercard"
href="https://redirect.github.com/SortableJS/Sortable/issues/2339">#2339</a>:
Fixes 1.15.1 regression with not being able to add element into start
&amp; end of list.</li>
</ul>
      </li>
      <li>
<b>1.15.1</b> - <a
href="https://redirect.github.com/SortableJS/Sortable/releases/tag/1.15.1">2023-11-30</a></br><ul>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1370365710" data-permission-text="Title is private"
data-url="SortableJS/Sortable#2203"
data-hovercard-type="issue"
data-hovercard-url="/SortableJS/Sortable/issues/2203/hovercard"
href="https://redirect.github.com/SortableJS/Sortable/issues/2203">#2203</a>:
Fix multi drag sort event not firing</li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1656925237" data-permission-text="Title is private"
data-url="SortableJS/Sortable#2263"
data-hovercard-type="pull_request"
data-hovercard-url="/SortableJS/Sortable/pull/2263/hovercard"
href="https://redirect.github.com/SortableJS/Sortable/pull/2263">#2263</a>:
Only call onDrop on destroy if dragged element inside parent
element</li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="523964543" data-permission-text="Title is private"
data-url="SortableJS/Sortable#1686"
data-hovercard-type="issue"
data-hovercard-url="/SortableJS/Sortable/issues/1686/hovercard"
href="https://redirect.github.com/SortableJS/Sortable/issues/1686">#1686</a>:
Prevent drag item from jumping to end of list if last element has
smaller width/height</li>
</ul>
      </li>
      <li>
<b>1.15.0</b> - <a
href="https://redirect.github.com/SortableJS/Sortable/releases/tag/1.15.0">2022-03-20</a></br><ul>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="977152901" data-permission-text="Title is private"
data-url="SortableJS/Sortable#2072"
data-hovercard-type="pull_request"
data-hovercard-url="/SortableJS/Sortable/pull/2072/hovercard"
href="https://redirect.github.com/SortableJS/Sortable/pull/2072">#2072</a>:
Make sure dragged element is inserted after last dragged element</li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1008208683" data-permission-text="Title is private"
data-url="SortableJS/Sortable#2084"
data-hovercard-type="pull_request"
data-hovercard-url="/SortableJS/Sortable/pull/2084/hovercard"
href="https://redirect.github.com/SortableJS/Sortable/pull/2084">#2084</a>:
Added <code>avoidImplicitDeselect</code> option to MultiDrag</li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1030640442" data-permission-text="Title is private"
data-url="SortableJS/Sortable#2093"
data-hovercard-type="issue"
data-hovercard-url="/SortableJS/Sortable/issues/2093/hovercard"
href="https://redirect.github.com/SortableJS/Sortable/issues/2093">#2093</a>:
Remove ID from cloned element</li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1030824960" data-permission-text="Title is private"
data-url="SortableJS/Sortable#2095"
data-hovercard-type="pull_request"
data-hovercard-url="/SortableJS/Sortable/pull/2095/hovercard"
href="https://redirect.github.com/SortableJS/Sortable/pull/2095">#2095</a>:
Remove ignoring click on Chrome for Android when dragging (wasn't
necessary)</li>
</ul>
      </li>
    </ul>
from <a
href="https://redirect.github.com/SortableJS/Sortable/releases">sortablejs
GitHub release notes</a>
  </details>
</details>

---

> [!IMPORTANT]
>
> - Check the changes in this PR to ensure they won't cause issues with
your project.
> - This PR was automatically created by Snyk using the credentials of a
real user.

---

**Note:** _You are seeing this because you or someone else with access
to this repository has authorized Snyk to open upgrade PRs._

**For more information:** <img
src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiIyZjBhYTViMC1jODJiLTRhZjUtODU3Zi0zYWQxOTIxOWZlMDAiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6IjJmMGFhNWIwLWM4MmItNGFmNS04NTdmLTNhZDE5MjE5ZmUwMCJ9fQ=="
width="0" height="0"/>

> - 🧐 [View latest project
report](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 📜 [Customise PR
templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates)
> - 🛠 [Adjust upgrade PR
settings](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17/settings/integration?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 🔕 [Ignore this dependency or unsubscribe from future upgrade
PRs](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17/settings/integration?pkg&#x3D;sortablejs&amp;utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades)

[//]: #
'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"sortablejs","from":"1.15.0","to":"1.15.3"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"2f0aa5b0-c82b-4af5-857f-3ad19219fe00","prPublicId":"2f0aa5b0-c82b-4af5-857f-3ad19219fe00","packageManager":"npm","priorityScoreList":[],"projectPublicId":"12a8a5f5-3e19-438c-8280-eb8f4ee06d17","projectUrl":"https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":3,"publishedDate":"2024-09-01T22:55:30.201Z"},"vulns":[]}'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement Quality of life changes to existing features
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@sabuz @vanBrakel @dzero1 @ayushm-agrawal @EtienneTLM @owen-m1 @ajacquierbret