Dragndrop - add enhanced dragndrop lists #9507

BurningTreeC · 2025-12-18T20:33:57Z

This draft PR adds an enhanced make-draggable-droppable and draggable-droppable-list procedure:

Bildschirmaufzeichnung.vom.2025-12-18.21-28-54.mp4

currently it works for vertically aligned lists only but it will be enhanced for horizontal lists, too
the transitions you see in the video can still be refined, I'm a bit tired now 😁 and will have to have a look with fresh eyes

I can imagine that this could for example easily be used for TiddlyDesktop's landing page ...

Please let me know if this is possible core material. Thank you <3

This commit adds the basic dragndrop procedures for enhanced draggable lists

netlify · 2025-12-18T20:34:02Z

✅ Deploy Preview for tiddlywiki-previews ready!

Name	Link
🔨 Latest commit	`613679f`
🔍 Latest deploy log	https://app.netlify.com/projects/tiddlywiki-previews/deploys/6946c0d2f09639000863f919
😎 Deploy Preview	https://deploy-preview-9507--tiddlywiki-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2025-12-18T20:34:05Z

Confirmed: BurningTreeC has already signed the Contributor License Agreement (see contributing.md)

github-actions · 2025-12-18T20:34:08Z

📊 Build Size Comparison: `empty.html`

Branch	Size
Base (master)	2450.2 KB
PR	2470.2 KB

Diff: ⬆️ Increase: +20.0 KB

✅ Change Note Status

All change notes are properly formatted and validated!

📝 $:/changenotes/5.4.0/#9507

Type: enhancement | Category: usability
Release: 5.4.0

Dragndrop procedures for enhanced dragndrop lists

🔗 #9507

👥 Contributors: BurningTreeC

📖 Change Note Guidelines

Change notes help track and communicate changes effectively. See the full documentation for details.

BurningTreeC · 2025-12-18T20:50:33Z

missing: handling for incomplete drop

pmario · 2025-12-19T01:26:07Z

core/modules/widgets/droppable.js

 	this.droppableListActions = this.getAttribute("listActions");
+	this.droppableEnterActions = this.getAttribute("dragenteractions");
+	this.droppableLeaveActions = this.getAttribute("dragleaveactions");
+	this.droppableEndActions = this.getAttribute("dragendactions");


For consistency reasons. Sice we have already listActions IMO we also could use dragEnterActions ans so on. IMO it would highly improve readability. eg: this.getAttribute("dragEndActions");

pmario · 2025-12-19T01:35:57Z

core/wiki/macros/dragndrop.tid

+</$let>
+\end
+
+\function get.drag.state.tiddler.height() [<dragStateTiddler>get[height]addsuffix[px]]


There is already a convention for core global filter naming. They should be prefixed with tf. eg: tf.named-with-hyphens or tf.camelCase, where it makes sense.

Later in the code the tf. prefix makes it clear, that a function is used in stead of a variable.

In this PR, all functions use a get. prefix, which "could" make it redundant. Can we remove it?

IMO we should remove tiddler- from state-tiddlers. IMO state- should be enough

So I think it should be named tf.drag-state-height. (I am also not realy sure, what it is used for. So it may be tf.drag-tiddler-height or tf.drag-height instead.)

pmario · 2025-12-19T01:46:58Z

core/wiki/macros/dragndrop.tid

+\function get.tiddler.before.target() [<dragStateTiddler>get[target]] :reduce[list<list>before<currentTiddler>]
+\function get.tiddler.after.target() [<dragStateTiddler>get[target]] :reduce[list<list>after<currentTiddler>]
+
+\function get.styleTransition()


Also here tf.styleTransition should be enough since functions always "get"

pmario · 2025-12-19T01:52:09Z

core/wiki/macros/dragndrop.tid

+</$tiddler>
+\end
+
+\procedure draggable-droppable-list(content:"",list:"",dropActions:"",class:"",dragStateTiddler:"$:/state/tiddlywiki/dragging",direction:"vertical",history:"",styleMarginTop:"0px",styleMarginBottom:"0px",stylePaddingLeft:"0px",stylePaddingRight:"0px",styleZIndex:"501",animationDuration:"175",animationCurve:"linear")


IMO it should be dragState and the docs should make it clear it expects a tiddler title. This will shorten the code line length quite a bit.

pmario · 2025-12-19T02:01:10Z

core/wiki/macros/dragndrop.tid

+\function get.drag.state.tiddler.height() [<dragStateTiddler>get[height]addsuffix[px]]
+\function get.drag.state.tiddler.margin.bottom() [<dragStateTiddler>get[margin-bottom]]
+
+\function get.draggable.droppable.bottom.class() tc-draggable-droppable-drop-bottom [<dragStateTiddler>get[margin]match[bottom]then<qualifiedDragEnterClass>] :and[join[ ]]


Can we shorten this to tf.drag-drop-bottom-class ?

pmario · 2025-12-19T02:10:20Z

This draft PR adds an enhanced make-draggable-droppable and draggable-droppable-list procedure:

Sorry for my ignorance, but I am not exactly sure, what the enhancement is.

BurningTreeC · 2025-12-19T04:03:42Z

Hi @pmario good morning

The enhancement is that the drag-and-drop elements move now using transitions which makes the drag-and-drop experience more natural
EDIT: also the height of the dragged element gets respected, when dragging, the space that gets made for the dragged element is exactly its height
The transitions still need to be fine-tuned a bit
The enhancement itself becomes more obvious with "bigger" elements
For example the tiddlers in the story river can be easily made draggable-droppable with this

BurningTreeC · 2025-12-19T04:28:20Z

Now the story river uses the make-draggable-droppable procedure to make all tiddlers in the story river drag-and-drop enabled. It's deactivated by default and can be activated using the Keyboard Shortcut alt-D

pmario · 2025-12-19T11:25:45Z

I found a bug. If you dnd a tiddler in the story river and the "Open" sidebar is visible, it allocates the height of the story river tiddler in the sidebar too. And vice versa if you dnd in Open tab

pmario · 2025-12-19T11:28:47Z

Also I think allocating the height of the tiddler in the story river does not make any sense for the default views available at tw-com. Is there an other usecase?

BurningTreeC · 2025-12-19T11:29:25Z

I found a bug. If you dnd a tiddler in the story river and the "Open" sidebar is visible, it allocates the height of the story river tiddler in the sidebar too. And vice versa if you dnd in Open tab

Thanks @pmario, yes I've seen that too. There are still some bugs...

Jermolene · 2025-12-19T13:48:33Z

Hi @BurningTreeC I like this. I’m interested in trying to evolve the UX closer to the standards of modern web applications, and this is a tour de force that nicely demonstrates how much of this sort of functionality can now be done in wiki text.

The core size increase is very significant, and it would be good to do all that we can to reduce it. Even if (probably optimistically) we got the size increase down to 15KB, I think it may still make sense to go ahead with it. The code is nicely encapsulated, so particularly if there’s a case that we can reuse a significant amount of it, I’d be interested to explore further.

…istenerReference

core/modules/utils/dom/dragndrop.js

BurningTreeC added 6 commits December 18, 2025 20:20

Add dragndrop procedures

75447a8

This commit adds the basic dragndrop procedures for enhanced draggable lists

enhance droppable widget

fc0ea00

remove superfluous pixel calculations

5010def

remove some debugging

26235c4

not sure about the transitions yet

4c84ac0

make use of in SideBar/Open tab

9ad3def

add changenote

770a5d4

pmario reviewed Dec 19, 2025

View reviewed changes

make story-river draggable-droppable (alt-D to activate)

1c33fa9

BurningTreeC mentioned this pull request Dec 19, 2025

Colour handling improvements #8702

Open

14 tasks

add margins and padding -> waiting for mediaquery tracking

2ec8f00

BurningTreeC mentioned this pull request Dec 19, 2025

Update droppable item to use tv-enable-drag-and-drop variable #9504

Open

BurningTreeC added 4 commits December 20, 2025 12:53

remove draggable-droppable-list procedure

9e16391

enhance draggable widget with dragStartListenerReference and dragEndL…

ee39ab0

…istenerReference

remove unused variables

5b90b72

fix access to classList being undefined

1dffbb0

pmario reviewed Dec 20, 2025

View reviewed changes

core/modules/utils/dom/dragndrop.js Outdated Show resolved Hide resolved

rename dragStartHandlerFunction and dragEndHandlerFunction

ba96a60

remove superfluous object property

613679f

Dragndrop - add enhanced dragndrop lists #9507

Are you sure you want to change the base?

Dragndrop - add enhanced dragndrop lists #9507

Uh oh!

Conversation

BurningTreeC commented Dec 18, 2025

Uh oh!

netlify bot commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for tiddlywiki-previews ready!

Uh oh!

github-actions bot commented Dec 18, 2025

Uh oh!

github-actions bot commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Build Size Comparison: empty.html

✅ Change Note Status

📝 $:/changenotes/5.4.0/#9507

Uh oh!

BurningTreeC commented Dec 18, 2025

Uh oh!

pmario Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pmario Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pmario Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

pmario Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

pmario Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

pmario commented Dec 19, 2025

Uh oh!

BurningTreeC commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BurningTreeC commented Dec 19, 2025

Uh oh!

pmario commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pmario commented Dec 19, 2025

Uh oh!

BurningTreeC commented Dec 19, 2025

Uh oh!

Jermolene commented Dec 19, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Dec 18, 2025 •

edited

Loading

github-actions bot commented Dec 18, 2025 •

edited

Loading

📊 Build Size Comparison: `empty.html`

pmario Dec 19, 2025 •

edited

Loading

pmario Dec 19, 2025 •

edited

Loading

BurningTreeC commented Dec 19, 2025 •

edited

Loading

pmario commented Dec 19, 2025 •

edited

Loading