Feature: Drag and Drop by PikachuEXE · Pull Request #8681 · FreeTubeApp/FreeTube

PikachuEXE · 2026-02-17T22:42:49Z

Pull Request Type

Bugfix
Feature Implementation
Documentation
Other

Related issue

Continue of #8621
Closes #4872

Description

Adds drag and drop ordering when custom sort is enabled for playlist videos both in list and grid view.

Grab bar on hover (list view only)

List drag and drop

Grid drag and drop

Testing

Testing instructions

Prepare a playlist with multiple videos
Test drag and drop feature in user playlists, ensure only draggable on custom sort (can be dragged back to original position
Test drag and drop NOT working on online playlists
Test drag and drop in BOTH list or grid view, ensure videos can only be moved by dragging the grab bar
Test dragging video title (link) and channel link to text box like top nav still makes it filled with an URL
Ensure dragging on user playlist with 1 video is disabled

To ensure list view is not broken, ensure to test the list view in search results (video playlist channel hashtag) to ensure nothing broken

Desktop

OS:
OS Version:
FreeTube version:

Additional context

https://github.com/maranran/eslint-plugin-vue-a11y/blob/master/docs/rules/mouse-events-have-key-events.md ignored for mouseenter/mouseleave let me know if it's not desired

Signed-off-by: Android789515 <derflug@mailfence.com>

Fix inability to drag grid videos to different rows. Signed-off-by: Android789515 <derflug@mailfence.com>

Signed-off-by: Android789515 <derflug@mailfence.com>

PikachuEXE · 2026-02-23T20:22:18Z

Well if you want I can show grab bar always with index number (which this PR already looks like it for device without hover
I am fine with grab bar shown on hover/always, up to you guys...

…humbnail and info

efb4f5ff-1298-471a-8973-3d47447115dc · 2026-02-27T19:39:56Z

Well if you want I can show grab bar always with index number

Sure lets do that.

PikachuEXE · 2026-03-01T01:01:55Z

@efb4f5ff-1298-471a-8973-3d47447115dc Updated
Added testing entry Ensure dragging on user playlist with 1 video is disabled

efb4f5ff-1298-471a-8973-3d47447115dc · 2026-03-07T18:28:13Z

It behaves a bit weird with duplicates

VirtualBoxVM_h99WvRXdSz.mp4

Sometimes there is like a trailing ghost effect as seen in the first seconds of the video. My expectation would be for it to be not there and behave like in the rest of the video (dont watch the full clip you will get it after the first 10sec)

VirtualBoxVM_1Xyiz6V46x.mp4

Moving around here also looks a bit weird here

VirtualBoxVM_ubYHAJzEdZ.mp4

PikachuEXE · 2026-03-09T02:08:42Z

It behaves a bit weird with duplicates

Yup but still no idea why, trying to fix this week

trailing ghost effect

Cannot reproduce, you using VM? Might have graphic acceleration issue if yes

Moving around here also looks a bit weird here

Probably the transition plus rapid firing of events
Added a throttle to prevent it

…video in the same playlist

PikachuEXE · 2026-03-09T02:19:28Z

It behaves a bit weird with duplicates

I dunno why I did not realize the playlist item ID not being used last time, probably due to lack of sleep
Fixed now

efb4f5ff-1298-471a-8973-3d47447115dc

Sometimes when i want to drag a video from down to up it doesnt let me

VirtualBoxVM_YLqIRHUIRV.mp4

VirtualBoxVM_VqC5gyrojr.mp4

PikachuEXE · 2026-03-12T01:30:08Z

I think you might be looking at the side effect of:

Probably the transition plus rapid firing of events
Added a throttle to prevent it

try drag over another item for > 100ms first

Or you can try to apply a fix for the previous issue with no throttle and no transition to see if that's the cause
I can't reproduce your case here

efb4f5ff-1298-471a-8973-3d47447115dc · 2026-03-13T10:22:41Z

Uhhh not sure how this happened

VirtualBoxVM_nlnmAlllWY.mp4

I think im unable to drag when thumbnail isnt fully in view.
Edit: yup seems like this is it because im seeing it now in both directions

VirtualBoxVM_9AXIw6MgtW.mp4

PikachuEXE · 2026-03-16T01:52:44Z

I can only see dragend fired right after start dragging an item partially out of screen, dunno why it happens

* development: (106 commits) Translated using Weblate (Portuguese) Bump electron from 40.8.0 to 41.0.2 (FreeTubeApp#8801) Translated using Weblate (German) Translated using Weblate (Lithuanian) Bump lefthook from 2.1.3 to 2.1.4 (FreeTubeApp#8799) Bump babel-loader from 10.1.0 to 10.1.1 in the babel group (FreeTubeApp#8794) Bump the webpack group with 2 updates (FreeTubeApp#8797) Bump the fortawesome group with 5 updates (FreeTubeApp#8796) Bump the eslint group with 3 updates (FreeTubeApp#8795) Bump vue from 3.5.29 to 3.5.30 (FreeTubeApp#8800) Translated using Weblate (Japanese) Serialize the error as a string to pass it back to the main view (FreeTubeApp#8789) Bump tar from 7.5.10 to 7.5.11 (FreeTubeApp#8788) Workaround for electron/electron#49253 (FreeTubeApp#8714) Translated using Weblate (Icelandic) Translated using Weblate (Japanese) Trim video titles with the local API to avoid breaking the databases (FreeTubeApp#8354) Translated using Weblate (Tamil) enhance issue templates (FreeTubeApp#8770) Bump vue-i18n from 11.2.8 to 11.3.0 (FreeTubeApp#8769) ...

efb4f5ff-1298-471a-8973-3d47447115dc · 2026-03-17T14:02:15Z

@absidue any idea?

PikachuEXE · 2026-03-23T06:50:46Z

It's the AutoScrollWrapper invisible hot zone
Wondering if that's needed...

Update 1

Update 2
Add .hotZone to CSS for .hotZone to see its area

Update 3
If no idea how to fix just set the zone to 50px first...

PikachuEXE · 2026-03-23T07:44:22Z

Found a way to fix it, but that also means when user starts to drag from near the window bottom the scrolling will start
I think we might want to reduce the height for the auto scroll zone (hot zone)

Preview: (green background is for easier viewing, we can keep or remove it

Screen.Recording.2026-03-23.at.15.39.40.mp4

efb4f5ff-1298-471a-8973-3d47447115dc · 2026-03-24T14:17:40Z

Noticed that Grid also is affected by this

VirtualBoxVM_pS1vlv9kas.mp4

Also sometimes in List it does drag and sometimes it doesnt even when its in view

VirtualBoxVM_xIfavJdPJd.mp4

* development: (42 commits) Translated using Weblate (Swedish) Translated using Weblate (Arabic) Translated using Weblate (Turkish) Translated using Weblate (Slovak) Translated using Weblate (French) Translated using Weblate (Portuguese (Brazil)) Translated using Weblate (Polish) Translated using Weblate (Japanese) Translated using Weblate (Russian) Translated using Weblate (Danish) Translated using Weblate (Italian) Bump shaka-player from 5.0.6 to 5.0.7 (FreeTubeApp#8848) Bump @babel/preset-env from 7.29.0 to 7.29.2 in the babel group (FreeTubeApp#8842) Bump calibreapp/image-actions (FreeTubeApp#8843) Bump actions/cache from 5.0.3 to 5.0.4 (FreeTubeApp#8844) Bump flatted from 3.3.3 to 3.4.2 (FreeTubeApp#8851) Translated using Weblate (German) Translated using Weblate (Czech) Translated using Weblate (Hungarian) Translated using Weblate (Norwegian Bokmål) ...

PikachuEXE · 2026-03-25T00:26:09Z

They both use the auto scroll component so I fixed both now
No idea about the list one, can't reproduce need steps

efb4f5ff-1298-471a-8973-3d47447115dc · 2026-03-25T13:49:35Z

In Grid mode video on the left lights up as if im hovering on it after i dragged the video besides it
This doesnt happen in List mode

VirtualBoxVM_YYjLi9jKJF.mp4

VirtualBoxVM_DKm9XWB2W0.mp4

PikachuEXE · 2026-03-28T04:10:05Z

This issue not happening on list view is due to list view's grab bar is not part of the ft-item box (which is lighten up on hover when watched
The mouse hover state seems to remain on as if the cursor never left the position before the mouse button is pressed during dragging (it's the previous/next item moved to the position of the cursor when mouse button when pressed which is considered hovered
You can observe the same thing if you drag the title/thumbnail to anywhere (like topnav text input) and it would remain like it's hovered (let me upload a video from mac soon

Update 1: the video

Screen.Recording.2026-03-28.at.12.08.25.mp4

efb4f5ff-1298-471a-8973-3d47447115dc

LGTM, thanks for taking this one over!

Android789515 added 30 commits February 2, 2026 00:49

fix: prevent video thumbnail from being dragged

2371aa9

Signed-off-by: Android789515 <derflug@mailfence.com>

feat: add drag and drop to playlist list view

f2a4036

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: null error for draggedVideo prop

e870212

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: prevent playlist thumbnail from being dragged

0b68790

Signed-off-by: Android789515 <derflug@mailfence.com>

refactor: move preventJankyDrag check to playlist

87e88e5

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: disappearing dragged videos

dbe6a26

Signed-off-by: Android789515 <derflug@mailfence.com>

refactor: simplify dragged video setter

6288432

Signed-off-by: Android789515 <derflug@mailfence.com>

feat: drag and drop for grid view

abd807c

Signed-off-by: Android789515 <derflug@mailfence.com>

style: reoder modified lines

4915c0d

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: videos trying to drop over themselves

38ce42f

Signed-off-by: Android789515 <derflug@mailfence.com>

refactor: cleanup after git rebase

f0a8d76

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: unable to click video components after drag

b3058e0

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: unable to drag videos on first attempt

034f548

Signed-off-by: Android789515 <derflug@mailfence.com>

refactor: simplify video plucking logic

c3f247e

Signed-off-by: Android789515 <derflug@mailfence.com>

refactor: drag and drop module

e154e24

Signed-off-by: Android789515 <derflug@mailfence.com>

docs: clarify ft list video style rule

cb8a25b

Signed-off-by: Android789515 <derflug@mailfence.com>

docs: add jsdoc typings

7b7af27

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: range populating with NaN

3c710f8

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: grid drag and drop issue

9fbc438

Fix inability to drag grid videos to different rows. Signed-off-by: Android789515 <derflug@mailfence.com>

Merge remote-tracking branch 'source/HEAD' into drag-and-drop-playlist

248f408

fix: video drag image rubber banding after move

c5b81e4

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: prevent draggable channel playlist videos

169bbe7

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: grab icon for playlist videos in grid layout

8b2b953

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: grab bar positioning at different screen sizes

344626f

Signed-off-by: Android789515 <derflug@mailfence.com>

Merge remote-tracking branch 'source/development' into development

262c638

fix: context menu items missing for video thumbnails

64593a8

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: free up cursor style for draggable elements when not dragging

df5bb0b

Signed-off-by: Android789515 <derflug@mailfence.com>

feat: grab cursor when hovering grab bar

557e687

Signed-off-by: Android789515 <derflug@mailfence.com>

fix: grabbing cursor being overridden

ffbf6ec

Signed-off-by: Android789515 <derflug@mailfence.com>

Merge remote-tracking branch 'source/development' into development

5572f80

! Fix text cannot be selected, can be grabbed via the space between t…

35a7b27

…humbnail and info

PikachuEXE added 2 commits March 1, 2026 08:50

! Fix able to drag the sole video in user playlist

77f896b

* Update list view to always show grab bar if draggable

1f656a0

PikachuEXE added PR: waiting for review For PRs that are complete, tested, and ready for review and removed PR: changes requested labels Mar 2, 2026

! Fix items moving back and forth if video dragged to a certain position

c29b282

! Fix incorrect behabiour when dragging playlist item with duplicate …

327fa1f

…video in the same playlist

efb4f5ff-1298-471a-8973-3d47447115dc reviewed Mar 11, 2026

View reviewed changes

$ Use computer ref instead of function

c4af0ce

PikachuEXE added 2 commits March 25, 2026 08:24

! Fix unable to drag from top/bottom areas

ca74aa1

efb4f5ff-1298-471a-8973-3d47447115dc approved these changes Mar 30, 2026

View reviewed changes

PikachuEXE requested a review from absidue March 30, 2026 22:39

Conversation

PikachuEXE commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Type

Related issue

Description

Grab bar on hover (list view only)

List drag and drop

Grid drag and drop

Testing

Testing instructions

Desktop

Additional context

Uh oh!

PikachuEXE commented Feb 23, 2026

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Feb 27, 2026

Uh oh!

PikachuEXE commented Mar 1, 2026

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Mar 7, 2026

Uh oh!

PikachuEXE commented Mar 9, 2026

Uh oh!

PikachuEXE commented Mar 9, 2026

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

Choose a reason for hiding this comment

Uh oh!

PikachuEXE commented Mar 12, 2026

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PikachuEXE commented Mar 16, 2026

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Mar 17, 2026

Uh oh!

PikachuEXE commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PikachuEXE commented Mar 23, 2026

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PikachuEXE commented Mar 25, 2026

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Mar 25, 2026

Uh oh!

PikachuEXE commented Mar 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

PikachuEXE commented Feb 17, 2026 •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented Mar 13, 2026 •

edited

Loading

PikachuEXE commented Mar 23, 2026 •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented Mar 24, 2026 •

edited

Loading

PikachuEXE commented Mar 28, 2026 •

edited

Loading