Dragging clones the source element creating a duplicate CSS ID #2093
Comments
vanboom
added a commit
to vanboom/Sortable
that referenced
this issue
Oct 19, 2021
…ng to the DOM. We should not create a duplicate CSS ID.
owen-m1
added a commit
that referenced
this issue
Dec 2, 2021
Issue #2093 remove ID from the cloned element prior to adding to the …
newkdr
added a commit
to newkdr/vscode-gitlens
that referenced
this issue
Dec 12, 2024
 <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 & 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=github&utm_medium=referral&page=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=github&utm_medium=referral&page=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=sortablejs&utm_source=github&utm_medium=referral&page=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
When a sortable element is picked up (dragged), the "ghost" element created has the same CSS ID in the DOM as the original element.
To Reproduce
Debugging is required to detect this...
cloneElelement created within the_onDragStartfunction will have the same ID as thedragEl.Expected behavior
A duplicate CSS ID should not be created.
Information
Easy to fix -- will submit a PR.
The text was updated successfully, but these errors were encountered: