TiddlyWiki / TiddlyWiki5

A self-contained JavaScript wiki for the browser, Node.js, AWS Lambda etc.
https://tiddlywiki.com/
Other
8.03k stars 1.19k forks source link

"draggable" more general as attribute and tag #3170

Open twMat opened 6 years ago

twMat commented 6 years ago

"draggable is a global attribute and applies to all HTML elements" - W3C

The DraggableWidget docs are a bit terse so I'm unsure how to actually use it - but I would like for it to be usable as an attribute for these key widgets:

<$transclude ... draggable="true">....</$transclude> or {{... draggable:"true"}} and <$macrocall ... draggable="true" /> or <<mymacro ... draggable:"true">>

Optionally, macro output could be wrapped in draggability like so:

\define mymacro()
<$draggable>
...
</$draggable>
\end

The latter also illustrates my more general wish for how the DraggableWidget could be used as tag

<$draggable>foo</$draggable>
Some interspersed other content.
<$draggable>bar</$draggable>
<$draggable>baz</$draggable>

here any draggable element can be placed right above or below any other of the draggable elements.

Jermolene commented 6 years ago

Hi @twMat

The draggable widget creates a DOM element (you can choose the tag) with a "draggable" attribute, and associated event handlers, to allow the element to be dragged. It is used by wrapping it around the content you want to be draggable.

but I would like for it to be usable as an attribute for these key widgets:

The transclude widget doesn't generate any DOM elements itself and so it can't itself be draggable.

The latter also illustrates my more general wish for how the DraggableWidget could be used as tag

That is pretty much how the draggable widget works. Try dragging the words "foo", "bar" and "baz" in this example into the "open" sidebar tab:

<$draggable tiddler="foo">foo</$draggable>
Some interspersed other content.
<$draggable tiddler="bar">bar</$draggable>
<$draggable tiddler="baz">baz</$draggable>
twMat commented 6 years ago

The transclude widget doesn't generate any DOM elements itself and so it can't itself be draggable.

But if including such an attribute adds a draggable widget around the output, then it should become a draggable element - right?

That is pretty much how the draggable widget works. Try dragging the words "foo", "bar" and "baz" in this example into the "open" sidebar tab: <$draggable tiddler="foo">foo</$draggable>

But "foo" is not a tiddler. It is a wikitext string of arbitrary length. The current solutsion seems to require an explicit list of the items which is neither possible with the aforementioned string but also generally very limiting. Might it be possible to have draggability automatically add droppability, so that one can arbitrarily wrap elements like I exemplified and have them rearrangeable.

twMat commented 6 years ago

To clarify [part of] my use case: I'm building TidBitz which is intended to be a DnD type of coding in TW. It should dramatically lower the threshold for beginners but will probably also be a convenient way to quickly create stuff for more advanced users.

Briefly, it is a way to drop macro calls into tiddlers along with values for the macro call which are placed in the dropped-on tiddlers fields, for transclusion. A point in this is to do this in tiddler view mode. It works pretty well but the dropped macrocalls must be rearrangable in the tiddler - in view mode. I.e the user should be able to drag e.g a rendered bullet list to above the rendered checkbox.

Jermolene commented 6 years ago

But if including such an attribute adds a draggable widget around the output, then it should become a draggable element - right?

No. Including such an attribute does not add a draggable widget around the output.

But "foo" is not a tiddler. It is a wikitext string of arbitrary length. The current solutsion seems to require an explicit list of the items which is neither possible with the aforementioned string but also generally very limiting. Might it be possible to have draggability automatically add droppability, so that one can arbitrarily wrap elements like I exemplified and have them rearrangeable.

I'm not sure what you're after here, but it sounds like you've not quite grasped how the draggable and droppable widgets work. I'd suggest getting a handle on them before trying to explore alternatives.

Briefly, it is a way to drop macro calls into tiddlers along with values for the macro call which are placed in the dropped-on tiddlers fields, for transclusion. A point in this is to do this in tiddler view mode. It works pretty well but the dropped macrocalls must be rearrangable in the tiddler - in view mode. I.e the user should be able to drag e.g a rendered bullet list to above the rendered checkbox.

To be honest, I wouldn't think of drag and drop as being the most convenient way of doing this. Why not just follow the example of the existing editor toolbar buttons, and have a button that popups up a form into which the user enters the details of the macro call that they want, and then clicks a button to insert it. I'm pretty sure you could build something like that without any core modifications.

Jermolene commented 6 years ago

Hi @twMat apologies I think I've just realised what you're asking for: the ability to use drag and drop to rearrange elements of a tiddler while in view mode. That's a big project!

twMat commented 6 years ago

Ah, good to hear it is at least not impossible then. Thing is, I look at this W3C example and it seems to me that the elements both allow for drag and drop simultaneously and, I guess, in view mode. And overall there is very little code. But maybe it doesn't fully translate to the TW case.