[TW5] Core drag-and-drop improvements

1,185 views
Skip to first unread message

Jeremy Ruston

unread,
Mar 19, 2017, 3:51:21 PM3/19/17
to TiddlyWiki
I’m very happy to announce much better core support for drag-and-drop in 5.1.14, with quite a few new features for end users:

* drag and drop the entries in the “open” sidebar list to rearrange the ordering of the open tiddlers
* drag tiddler titles into the “open” sidebar list to open those tiddlers at a chosen position in the story river
* drag and drop the entries in a tag dropdown to rearrange the ordering of the tagged items
* drag tiddler titles into the open tag dropdown to add that tag to those tiddlers
* drag a tag pill to drag all of the tiddlers that carry that tag. This feature can be used to drag multiple tiddlers between wikis in separate windows, or to drag multiple items in the scenarios above

I’ve posted a prerelease so that you can try the new functionality; I’d welcome any feedback:


I’ve yet to add any documentation for the components that make up these new features:

* <$draggable> widget
* <$droppable> widget
* insertbefore filter operator
 
You can see the detailed changes in the commit log:


Drag-and-drop has been on the todo list for a long time. BJ released an enhancement of the list widget that supported drag and drop a year or two ago, and it had been my itntention to engineer it into the core. As it has turned out, the eventual implementation is more granular, adding a handful of new primitives that can be combined together and with existing components to produce various effects.

Best wishes

Jeremy.

Mat

unread,
Mar 19, 2017, 4:48:46 PM3/19/17
to TiddlyWiki, Tiddl...@googlegroups.com
Yes! Yes! Yes!!! Thank you Jeremy and BJ!!!

...and...


> drag a tag pill to drag all of the tiddlers that carry that tag. This feature can be used to drag multiple tiddlers between wikis in separate windows, or to drag multiple items in the scenarios above

KA-BOOOOM! Suddenly anyone can make "unpackaged plugins" ! This is HUGE!

A quick first testing in Chrome and FF, including some attempts to break it, looks great.

<:-D

Jan

unread,
Mar 19, 2017, 4:54:15 PM3/19/17
to tiddl...@googlegroups.com
Hi Jeremy,
this is great (though it makes obsolete my rearranger-workarround in slidesnstories.tiddlyspot.com)

Does this mean that BJ´s taglist  and Mklauber's dropaction-Tagpill features are now part of the core and I can replace them with a widget-based syntax.

Thanks a lot Jan
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/BC699EAB-F441-4C32-BB9E-CBA00985FD7D%40gmail.com.
For more options, visit https://groups.google.com/d/optout.

Mat

unread,
Mar 19, 2017, 5:33:14 PM3/19/17
to TiddlyWiki, Tiddl...@googlegroups.com
A discovery; When dropping into an edit field, the titles appear without [[space capturing brackets]] .

Again... let me express how happy I am with this addition. I think it is super cool as it is and I expect super cool things to evolve from it.

<:-)

Jeff Vance

unread,
Mar 19, 2017, 5:48:07 PM3/19/17
to TiddlyWiki, Tiddl...@googlegroups.com
 I'm very excited to use these new features. One odd thing I noticed:  I just experimented with dragging the entries in a tag drop down list. I noticed that it isn't possible to drag a title directly to the end of the list. You have to instead drag it to be 2nd to last, then drag the last entry up. Not really a big deal, but I'm assuming maybe that wasn't intended.

Cheers!
Jeff

Message has been deleted
Message has been deleted

BJ

unread,
Mar 19, 2017, 6:17:25 PM3/19/17
to TiddlyWiki, Tiddl...@googlegroups.com
Nicely Done!

Handoko Suwono

unread,
Mar 20, 2017, 4:23:35 AM3/20/17
to TiddlyWiki, Tiddl...@googlegroups.com
I asked once about drag and drop, so I am reposting to following the updates. 

"A friend asked. Is there any chance to use TW with the drop and drag functions or I don't know how? I think it's about anything related to drop and drag' and possibly related to work with tiddly desktop or the new beaker browser on OSx."


Thanks.

handoko -

Matthew Lauber

unread,
Mar 20, 2017, 8:25:01 AM3/20/17
to TiddlyWiki, Tiddl...@googlegroups.com
Ooh, I have some things to build with this.... Thanks Jeremy!

Matt

Alex Hough

unread,
Mar 20, 2017, 12:45:22 PM3/20/17
to TiddlyWiki
Excellent!
Well done Jeremy and BJ!



Alex

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Jeremy Ruston

unread,
Mar 20, 2017, 6:54:13 PM3/20/17
to tiddl...@googlegroups.com
Many thanks for the feedback. I’ve posted an update to http://tiddlywiki.com/prerelease with a few changes:

* Added support for dragging items to the end of lists
* Added support for using drag and drop to reorder toolbar buttons in Control Panel, Appearance, Toolbars
* Added some macros for draggable lists:
** based on a list field: list-links-draggable(tiddler,field:"list",type:"ul",subtype:"li",class:"",itemTemplate)
** based on a tags field, with sorting via the companion list field: list-tagged-draggable(tag,itemTemplate)
* Fixed: Lack of [[quoting]] for tiddler titles dragged into a text box, reported by Mat
* Fixed: Crash with dragging text snippets, reported by Mario

I’d welcome any thoughts about other opportunities to improve other areas of the UI with drag and drop.

Best wishes

Jeremy


To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Mat

unread,
Mar 20, 2017, 7:28:39 PM3/20/17
to TiddlyWiki
@Jeremy - thanks for updates!

Some new issues though:
The very thing you show in the animation in your last post does not seem to work in (Win10) FF, Edge or IE. (In chrome it does work.)
Further, I get the red JS error in Edge when attempting to relocate an item within tab Open.

<:-)

David Szego

unread,
Mar 20, 2017, 8:26:13 PM3/20/17
to TiddlyWiki, Tiddl...@googlegroups.com
Thrilled to hear this, great work!
Message has been deleted

Jeremy Ruston

unread,
Mar 21, 2017, 11:44:09 AM3/21/17
to tiddl...@googlegroups.com
Hi Atul

Please could you start a new thread if you’re posting about a new topic?

Thank you,

Best wishes

Jeremy.

On 21 Mar 2017, at 15:31, Atul Grover <atulg...@gmail.com> wrote:

Hi Jeremy,

 

Is there any "Theme tweak options" or "Default Sidebar Tab actions" which will make the TW more suitable for mobiles wherein the sidebar open/close from the side rather than becoming visible/hidden at the top?


Just by making this minor change TW will become much appropriate for mobile devices.

Better still if TW could automatically shift to such functionality when opened on a mobile device.

 

Regards

Atul


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Jeff Vance

unread,
Mar 21, 2017, 4:11:40 PM3/21/17
to TiddlyWiki, Tiddl...@googlegroups.com
Quick question:  Does the drag and drop only work when the filter is based on the contents of a field? It appears to be the case. I see in the demo it grabs all the days of the week from the List field and drag/drop saves the new order in that field.  So what if you use a filter that doesn't get the order from a field? I'm guessing it won't work since there is no way to save the state of the new ordering.  So I assume that if you want to make any list draggable, you must save the filtered list to a field first.

c pa

unread,
Mar 21, 2017, 5:53:20 PM3/21/17
to TiddlyWiki, Tiddl...@googlegroups.com
Jeff,

Notice in the demo that Jeremy has defined a macro called drop-actions() that specifically edits the contents of that list field. That macro is then called in the associated droppable widget.

\define drop-actions()
<$action-listops $tiddler="Days of the Week" $subfilter="+[insertbefore:currentTiddler<actionTiddler>]"/>
\end

<$droppable actions=<<drop-actions>>>

There seems to be a special variable, actionTiddler, that corresponds to the list of tiddler titles being dropped. So yes, you do need to identify some container to hold the ordered list but that container can be a tiddler's text, a list field, or an index. (I can't think of any other out-of-the-box containers) You may perhaps be able to pass it to a button or other widget but that would need some testing to figure out how that works.

@TiddlyTweeter

unread,
Mar 22, 2017, 4:46:03 PM3/22/17
to TiddlyWiki, Tiddl...@googlegroups.com
As an idiot I'd like to simply wrap any normal text in that gizmo and be able to move the lines (paragraphs) within it around :-)

best wishes
Josiah

Matt Groth

unread,
Mar 23, 2017, 12:14:09 AM3/23/17
to TiddlyWiki, Tiddl...@googlegroups.com
Thank you Jeremy and contributors! So excited to test this out!

Xavier Cazin

unread,
Mar 23, 2017, 6:23:52 AM3/23/17
to tiddl...@googlegroups.com
Hi Jeremy,

Thank you for this very useful feature!

After playing with it for a while, a request for an additional functionality arose: being able to restrict the dragged tiddlers to be accepted in certain droppable areas while being refused in others. I guess I could use a state parameter with the <$draggable> widget, and whitelist/blacklist parameters with the <$droppable> widget.

Also, for the record, being able to use drag and drop on phones and tablets would be nice :-)

Cheers,

-- Xavier Cazin

Jeremy


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Jeremy Ruston

unread,
Mar 23, 2017, 6:32:39 AM3/23/17
to tiddl...@googlegroups.com
Hi Xavier

Thanks for the feedback

After playing with it for a while, a request for an additional functionality arose: being able to restrict the dragged tiddlers to be accepted in certain droppable areas while being refused in others. I guess I could use a state parameter with the <$draggable> widget, and whitelist/blacklist parameters with the <$droppable> widget.

That’s my thinking too. I think we need two capabilities:

* Adding a “type” attribute to the draggable widget, and an “acceptType” attribute to the droppable widget
* Adding a filter to the droppable widget that is applied to incoming tiddlers so that they can be checked (eg only accepting tiddlers with a given tag)

Also, for the record, being able to use drag and drop on phones and tablets would be nice :-)

I did find this shim that implements the HTML5 drag and drop APIs on mobile browsers, both iOS and Android:


Does the demo work for you?


Best wishes

Jeremy


Cheers,

-- Xavier Cazin

On Mon, Mar 20, 2017 at 11:53 PM, Jeremy Ruston <jeremy...@gmail.com> wrote:
Many thanks for the feedback. I’ve posted an update to http://tiddlywiki.com/prerelease with a few changes:

* Added support for dragging items to the end of lists
* Added support for using drag and drop to reorder toolbar buttons in Control Panel, Appearance, Toolbars
* Added some macros for draggable lists:
** based on a list field: list-links-draggable(tiddler,field:"list",type:"ul",subtype:"li",class:"",itemTemplate)
** based on a tags field, with sorting via the companion list field: list-tagged-draggable(tag,itemTemplate)
* Fixed: Lack of [[quoting]] for tiddler titles dragged into a text box, reported by Mat
* Fixed: Crash with dragging text snippets, reported by Mario

I’d welcome any thoughts about other opportunities to improve other areas of the UI with drag and drop.

Best wishes

Jeremy

<TestGif2.gif>
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Xavier Cazin

unread,
Mar 23, 2017, 7:00:05 AM3/23/17
to tiddl...@googlegroups.com
H
​i Jeremy,

After playing with it for a while, a request for an additional functionality arose: being able to restrict the dragged tiddlers to be accepted in certain droppable areas while being refused in others. I guess I could use a state parameter with the <$draggable> widget, and whitelist/blacklist parameters with the <$droppable> widget.

That’s my thinking too. I think we need two capabilities:

* Adding a “type” attribute to the draggable widget, and an “acceptType” attribute to the droppable widget
* Adding a filter to the droppable widget that is applied to incoming tiddlers so that they can be checked (eg only accepting tiddlers with a given tag)

​Yes!​
 
Also, for the record, being able to use drag and drop on phones and tablets would be nice :-)

I did find this shim that implements the HTML5 drag and drop APIs on mobile browsers, both iOS and Android:


Does the demo work for you?


​Indeed, the demo works very smoothly on every browsers I have got installed on my Android 5.1 phone!

Have a good day
​-- Xavier​.

Thomas Elmiger

unread,
Mar 23, 2017, 8:31:48 AM3/23/17
to TiddlyWiki
Hi Jeremy

I have only a minor issue with the demo: When I point on the left of a list item and drag, it works as expected – when I point on the right side of an element it *jumps* to the right when I start dragging so that it feels much less smooth.

Great features!
Thomas

Mat

unread,
Mar 23, 2017, 8:31:18 PM3/23/17
to TiddlyWiki
Updating my error report from a few days ago.  Can anybody confirm these problems:

Win10
- drag tagpill into sidebar does not work in Edge or IE. (It works in FF and Chrome!)
- red JS error in Edge when attempting to use drag'n drop all togehter. Error message "Element not found"

Prevously, the tagpill part also didn't work for FF, for me. In other words, the problems now seem limited to Edge or IE, which are historically not the best browsers for TW anyway.

<:-)

Jan

unread,
Mar 25, 2017, 5:24:03 PM3/25/17
to tiddl...@googlegroups.com
Hi Jeremy,
where do I find the empty prerelease to update. It would be nice to have a link in the list of new features...

Best wishes

Jan






Am 19.03.2017 um 20:51 schrieb Jeremy Ruston:
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Atul Grover

unread,
Mar 27, 2017, 3:32:46 AM3/27/17
to TiddlyWiki, Tiddl...@googlegroups.com
Thank you Jeremy and BJ!! Took me some time to comprehend...now I realize how I can use this great utility, especially in my project.

Thanks


Mat

unread,
Mar 28, 2017, 8:10:48 AM3/28/17
to TiddlyWiki, Tiddl...@googlegroups.com
@Jeremy

In e.g github it is possible to press Ctrl-v to paste images from clipboard/memory. I'm thinking this has similarities with drag'n drop, i.e I'm assuming drag'n drop also temporarily holds something in some memory and then copies from memory into where it is dropped.

So, I'm wondering if this new functionality lays the ground for paste-image-from-clipboard or if that is a whole different matter?

<:-)

Jeremy Ruston

unread,
Mar 28, 2017, 8:14:50 AM3/28/17
to tiddl...@googlegroups.com
Hi Mat

In e.g github it is possible to press Ctrl-v to paste images from clipboard/memory. I'm thinking this has similarities with drag'n drop, i.e I'm assuming drag'n drop also temporarily holds something in some memory and then copies from memory into where it is dropped.

So, I'm wondering if this new functionality lays the ground for paste-image-from-clipboard or if that is a whole different matter?

Drag and drop is indeed implemented similarly to clipboard operations.

However, "paste from clipboard” has been in TiddlyWiki5 for a few years. Up until recently it only worked in Chrome, but now it seems to work in Firefox too.

To try it out, copy an image to the clipboard, and then click on a TiddlyWiki window background, and use the menu or shortcut key for paste, and you should get an import tiddler for importing that image.

Best wishes

Jeremy.



<:-)

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Mat

unread,
Mar 28, 2017, 3:15:49 PM3/28/17
to TiddlyWiki
Jeremy wrote:

However, "paste from clipboard” has been in TiddlyWiki5 for a few years. Up until recently it only worked in Chrome, but now it seems to work in Firefox too.

To try it out, copy an image to the clipboard, and then click on a TiddlyWiki window background, and use the menu or shortcut key for paste, and you should get an import tiddler for importing that image.

Hah - that was news to me! I'm glad it works but I made the assumption that I think most people make namely that pasting "should" work like in github, gmail, text editors etc i.e that one pastes into the editor as is done when pasting text. For anyone compelled to make a plugin, is it at all possible to apply a separate drop zone to the text editor? (What exactly should happen when an image is dropped is another matter, I think.)

Interestingly, pasting into Chrome creates a tiddler named "Untitled" whereas pasting into FF creates "image.png". Is that a browser design matter or TW? Nice with informative metadata in default names.

Thanks!

<:-)



AltugOz

unread,
Mar 28, 2017, 11:40:54 PM3/28/17
to TiddlyWiki
Hi Mat,

I believe what you are describing i.e. pasting an image into the editor window, can currently be done when editing HTML tiddlers using ckeditor (through the VisualEditor plugin).

Any pasted image is encoded in base64, embedded within the tiddler and displayed in the editor window. You can scale it and apply custom styles etc. What this doesn't do however is to create a separate image tiddler with that image's content. Still, this workflow works for my purposes as I don't reuse images within the wiki very often.

Best,
Altug

Mat

unread,
Mar 30, 2017, 7:21:26 AM3/30/17
to TiddlyWiki, Tiddl...@googlegroups.com
@Jeremy

I just realized DnD is limited to copying the title into the new place. It does not seem possible to relocate a title from one list to another which means one has to manually edit the source list (after locating wherever it resides!) to delete the item.

However, within a list it is (understandably) the other way around; DnD relocates rather than copies.

An option to have the dropping cause relocation would be neat. (And it would probably allow for a desktop drag-to-garbage can!)

<:-)

PMario

unread,
Mar 30, 2017, 7:30:26 AM3/30/17
to TiddlyWiki, Tiddl...@googlegroups.com
On Thursday, March 30, 2017 at 1:21:26 PM UTC+2, Mat wrote:
An option to have the dropping cause relocation would be neat. (And it would probably allow for a desktop drag-to-garbage can!)

hmm,
Since d&d primarily uses tags and many tiddlers have multiple tags, they should be _not_ relocated, since this means removing the tag. ... For me this wouldn't be preferable.

... but ... having different modifiers eg: ctrl d&d... copy, shift d&d move, alt d&d ... ???, ctrl-shift d&d... ??, alt-shift d&d... ??? may be useful settings. .. If those states can be recognised.

-mario

Mat

unread,
Mar 31, 2017, 2:25:52 AM3/31/17
to TiddlyWiki, Tiddl...@googlegroups.com

Good point! (And, it probably points to a weakness in how we use tags but that's another story.) but as you say, one could imagine optional modifiers, either via keyboard commands. Another idea could be some visual option buttons appearing as you drop that take into account if the dropping zone is withing the same list or on some other place where you might want to rid the tag after all. A third idea, or perhaps one including the two former, could be a $droppable paramter such as "untag=yes". Needs more thinking.

<:-)

Jeff Vance

unread,
Mar 31, 2017, 12:27:49 PM3/31/17
to TiddlyWiki, Tiddl...@googlegroups.com

I was thinking of what might be a convenient way of taking advantage of the drag-and-drop. One that came to mind is when you're writing a document and you want to draft each section in a different tiddler. In the writing process, you inevitably will need to reorganize sections or insert sections. Each section of the document could be tagged by a Table of Contents tiddler that lists all the sections in order.  With drag-and-drop, it sounds like you could simply drag the order of the sections in the TOC and it can save the new order in a field.  Then when you're done, you can transclude all the sections in the correct order to export the final draft.


Sergey Shishkin

unread,
Mar 31, 2017, 5:10:03 PM3/31/17
to TiddlyWiki, Tiddl...@googlegroups.com
Hi, Jeremy.

Is it possible to include in the 14th release the ability to install a hidden sidbar when opening a wiki? For example, in Control Panel> Settings> add Default Sidebar (show or hide).


Best wishes

Sergey

Mat

unread,
Apr 1, 2017, 1:56:57 PM4/1/17
to TiddlyWiki, Tiddl...@googlegroups.com
Jeff Vance wrote:

I was thinking of what might be a convenient way of taking advantage of the drag-and-drop. One that came to mind is when you're writing a document and you want to draft each section in a different tiddler. In the writing process, you inevitably will need to reorganize sections or insert sections. Each section of the document could be tagged by a Table of Contents tiddler that lists all the sections in order.  With drag-and-drop, it sounds like you could simply drag the order of the sections in the TOC and it can save the new order in a field.  Then when you're done, you can transclude all the sections in the correct order to export the final draft.


Jeff, that reminds me of TiddlyDocs ! A very fascinating project from many years ago.

Check this out:

Video-intro by Simon McManus to the original creation (sorry, dead link).
Here is an attempted remake by me (in TW classic)
.and this is a discussion from 2014 that finishes off with @Jeremy talking about DnD in TW5 that should let us make TiddlyDocs one day!!! ;-)

To have the TW5 ToC macros feature DnD would be fantastic. It would make it very easy to author stories, papers, articles.. really any linear document... piece wise. 

<:-)


@TiddlyTweeter

unread,
Apr 1, 2017, 2:11:00 PM4/1/17
to TiddlyWiki, Tiddl...@googlegroups.com
what could a newcomer do with that? :-)

Mat wrote:

... that reminds me of TiddlyDocs ! A very fascinating project from many years ago.

Mat

unread,
Apr 1, 2017, 2:24:24 PM4/1/17
to TiddlyWiki, Tiddl...@googlegroups.com
@TiddlyTweeter wrote:
what could a newcomer do with that? :-)

TiddlyDocs would e.g let you author a book by first making an outline of chapters and subsections. Then fill in stuff gradually and easily rearrange the outline.
The main point - at least IMO - was/is that you can get a linear document in this otherwise wonderfully non-linear tool. Linearity is, of course, necessary in many situations like, say, books or discussion threads.

If your question was more about what a newcomer can do with TiddlyDocs as that old relic stands today, I'd say that a newcomer should better focus on TW5 and encourage developing DnD to enable TiddlyDocs functionality in TW5.

<:-)
Message has been deleted

jarcoug...@gmail.com

unread,
Apr 5, 2017, 8:49:18 AM4/5/17
to TiddlyWiki, Tiddl...@googlegroups.com


On Monday, March 20, 2017 at 12:33:14 AM UTC+3, Mat wrote:
A discovery; When dropping into an edit field, the titles appear without [[space capturing brackets]] .

Again... let me express how happy I am with this addition. I think it is super cool as it is and I expect super cool things to evolve from it.

<:-)

THanks for the heads-up, I had been planning to ask for this feature, but one must be patient, I suppose.

Alex Hough

unread,
Apr 18, 2017, 4:32:54 AM4/18/17
to TiddlyWiki
Ive been playing with drag and drop... and I for me it opens up a new way of working.

Lists have been overshadowed by tags for two long!



Set titles to links drag to pills




When titles are links they can be dragged into TagPills



The drag and dropped Tiddler is tagged by the TagPill and goes onto the tags list

The titles of the tag tiddler can change, so lists can be made without really knowing what you want to call that list



Delaying the classification of a list until after it is formed and played about with fits with the way I behave in the physical world. A tiddler is another word for a "thingy", a provisional name for something. Names can come later, its capturing the thought that's important.

In some ways a list in more is a more basic method of organising things than linking. 

The drag and drop capability brings super-fast list making to TiddlyWiki. Dragging and dropping links in lists

Easy draggable lists 

There's two new macros for creating draggable lists. 

Here I cut and paste the example and change it. The new tiddler now has a draggable and droppable list




Drag from the sidebar onto the list in the new tiddler

reorder if you want

Look out for captions!
 the list macro uses the caption field of a tiddler (if it has one) in the list (see "droppable" and "draggable" below)






Draggable Open

Re-order the StoryRiver by drag and droppging titles in the open tag
* fold tiddlers comes in more useful


​ 


Drag to action

The DraggableWidget tiddler has two demos which could signal the way towards more drag and drop features. A tiddler is dragged onto an icon, that icon is added to the tiddler. The tiddler is dragged onto a colour, the tiddlers color field is set to that colour.

It's not hard to imagine similar behaviours using different ActionWidgets

  • drag a tiddler only a tag
  • drag tiddler onto a list
  • drag an icon onto a tiddler to tag it
  • drag a list icon of a particular colour onto a tiddler to add that tiddler to a coloured list.
  • drag to a bin icon: remove tiddler from a particular list

that's all for now

Alex







--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Jeff Vance

unread,
Apr 18, 2017, 12:48:35 PM4/18/17
to TiddlyWiki
Thanks for pointing these out Alex. I didn't realize so many new possibilities were opening up with this feature.  I completely agree with your point on the ability to change the name of the tag tiddler. I run into this problem all the time. I start collecting and grouping things, only later changing how I want to classify them.  Up until now I relied heavily on the RenameTags tiddler that was previously posted in the community.

Mat

unread,
Apr 18, 2017, 1:04:46 PM4/18/17
to TiddlyWiki
AlexHough wrote:

When titles are links they can be dragged into TagPills

Hah! That's really cool!!!! Thanks for reporting Alex!

BTW, I always set "titles as links". I can't see why one would not want this - other than having blue titles which is a styling matter and not a functionality matter.

<:-)

Douglas Counts

unread,
Apr 18, 2017, 4:21:16 PM4/18/17
to TiddlyWiki, Tiddl...@googlegroups.com
I would also be awesome if the order of the table of contents could be rearranged with Drag and Drop.  Doing so would make it incredibly easy to customize that tab for a myriad of purposes.

Perhaps to drag current TOC items to the top of the list. Arrange the TOC alphabetically with Drag and Drop, etc.  Not having to use macros to do this would make TiddlyWiki more accessible to your basic user.

-Doug

Alex Hough

unread,
Apr 19, 2017, 1:50:46 PM4/19/17
to TiddlyWiki
Here's something to play with: drop onto a delete button to remove all tags


Alex

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

@TiddlyTweeter

unread,
Apr 20, 2017, 3:32:42 PM4/20/17
to TiddlyWiki
Alex, its a very neat practical instance of applying the new functions available.

Best wishes
Josiah


On Wednesday, 19 April 2017 19:50:46 UTC+2, AlexHough wrote:
Here's something to play with: drop onto a delete button to remove all tags


Alex
On 18 April 2017 at 21:21, Douglas Counts <dougla...@gmail.com> wrote:
I would also be awesome if the order of the table of contents could be rearranged with Drag and Drop.  Doing so would make it incredibly easy to customize that tab for a myriad of purposes.

Perhaps to drag current TOC items to the top of the list. Arrange the TOC alphabetically with Drag and Drop, etc.  Not having to use macros to do this would make TiddlyWiki more accessible to your basic user.

-Doug

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Thomas Elmiger

unread,
Apr 20, 2017, 3:48:41 PM4/20/17
to tiddl...@googlegroups.com
Hi Alex

Would it be possible to remove single tags instead of all in the same way? 

If I put my finger on the link in your second tiddler a little bit longer, I get a Red Screen of Death with this message:
ReferenceError: Can't find variable: evt

(iOS on iPhone) – I have no idea about why this happens, just wanted to let you know. 

All the best! 
Thomas 

Alex Hough

unread,
Apr 21, 2017, 6:35:27 AM4/21/17
to TiddlyWiki
Hi Thomas,

I think it would be possible to remove single tags

You can do this already, the trick is to drop from a TagPill, which Jeremy has updated.

This giff below was recorded from https://alexhough.github.io/DropToDelete.html





I have made another demo, this one uses ActionSendMessageWidget to close a tiddler, and I have -- in a highly unusual move -- documented my progress!


I am not sure, but I think it would depend if FieldMangerWidget is compatible with the DroppableWidget

If so, the tm-remove-tiddler message could be used

I think the starting point to look into this is the core TagPill macro and the tagpill template

Basically Jeremy has used 

list-tagged-draggable Macro





It feels more intuitive to drag a tag onto a tiddler to tag it... i;ve not quite got my head round it at the moment, but i think its about swapping round currentTiddler and actionTiddler in the maco definition part of the droppable tiddler



Alex

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Jeremy Ruston

unread,
Apr 21, 2017, 9:11:57 AM4/21/17
to tiddl...@googlegroups.com
If I put my finger on the link in your second tiddler a little bit longer, I get a Red Screen of Death with this message:
ReferenceError: Can't find variable: evt

Thanks Thomas, that should be fixed now if you check http://tiddlywiki.com/prerelease

Best wishes

Jeremy

Thomas Elmiger

unread,
Apr 21, 2017, 11:17:16 AM4/21/17
to TiddlyWiki
Hi Jeremy

I answer here, assuming the RSOD on iOS links is related to DnD … I found another – external – link in the new prerelease producing another RSOD:

TypeError: undefined is not an object (evaluating 'files.length')
close

this appears when I longer-tap the first link on
http://tiddlywiki.com/prerelease/#Transclusion

All the best,
Thomas

Thomas Elmiger

unread,
Apr 21, 2017, 11:25:24 AM4/21/17
to TiddlyWiki
By the way – dragging of internal links on mobile seems to be of limited use in most cases: the link takes you to the link target before you get a chance to reach a drag target …

Am I missing something?

Jeremy Ruston

unread,
Apr 21, 2017, 11:37:11 AM4/21/17
to tiddl...@googlegroups.com
Hi Thomas
Thanks, that’s now fixed.

> By the way – dragging of internal links on mobile seems to be of limited use in most cases: the link takes you to the link target before you get a chance to reach a drag target …

I upgraded the underling ios-drag-drop.js library, and I think it has introduced a regression. For me, I can’t drag the links in a tag dropdown but dragging the links in the “Open” tab of the sidebar works fine. I’ll investigate.

Best wishes

Jeremy

@TiddlyTweeter

unread,
Apr 22, 2017, 8:16:40 AM4/22/17
to TiddlyWiki
Ciao Jeremy

The cross-browser (& cross-device) issues kinda make this wonderful drag-and-drop work you have done a bit of saga?

I can see its immensely helpful where it works. I found Alex Hough's simple demos illustrate it well.

One obvious application would be for IN (one) Tiddler re-organisation. For instance, to re-arrange To Do Lists. Could it do that?

Best wishes
Josiah

@TiddlyTweeter

unread,
Apr 22, 2017, 12:06:29 PM4/22/17
to TiddlyWiki
Ciao Jeremy

I notice that the visuals of drag-&-drop are sometimes odd. It seems more an AESTHETIC issue than a problem, but its a bit confusing.

Here is a screen capture running under Firefox ESR 45.8 on Windows that illustrates the issue. Sometimes the green dashed box persists after the d-n-d.



Best wishes
Josiah
Auto Generated Inline Image 1

Jeremy Ruston

unread,
Apr 22, 2017, 12:09:57 PM4/22/17
to tiddl...@googlegroups.com
Hi Josiah

I notice that the visuals of drag-&-drop are sometimes odd. It seems more an AESTHETIC issue than a problem, but its a bit confusing.

Here is a screen capture running under Firefox ESR 45.8 on Windows that illustrates the issue. Sometimes the green dashed box persists after the d-n-d.

Firefox has a long-standing bug with the events it sends during a drag operation which can lead to the dropzone highlighting not being removed. I’ve spent a ridiculous amount of time on it, and frankly now given up :)

Best wishes

Jeremy




<Auto Generated Inline Image 1.gif>

Best wishes
Josiah


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

For more options, visit https://groups.google.com/d/optout.
<Auto Generated Inline Image 1.gif>

Jeremy Ruston

unread,
Apr 22, 2017, 12:12:38 PM4/22/17
to tiddl...@googlegroups.com
Hi Josiah

The cross-browser (& cross-device) issues kinda make this wonderful drag-and-drop work you have done a bit of saga? 

I can see its immensely helpful where it works. I found Alex Hough's simple demos illustrate it well. 

I think you’re referring to the recent discussion of problems with iOS. It’s important to understand that those problems relate to the off-the-shelf open source “shim” we’re using that attempts to add HTML5-compliant drag and drop APIs to mobile browsers. Most drag and drop stuff on the web just doesn’t work on touch browsers; it’s pretty remarkable that the shim works at all. It is being actively developed, though, so we can hope that issues will get resolved.

Otherwise, the only cross browser issues I’m aware of are the (harmless) problem of the ghost dropzone highlight in Firefox, and the inability to drag links on Internet Explorer 11.

best wishes

Jeremy.
Message has been deleted

@TiddlyTweeter

unread,
Apr 22, 2017, 12:31:46 PM4/22/17
to TiddlyWiki
Ciao Jeremy

FYI I have a Microsoft Surface Tablet that has touchscreen. It works fine with d-n-d in TW5. Its Windows 10 running standard Firefox. I assume its just treating my finger as if it was the mouse--i.e. replicating a standard desktop. But at least its worth confirming that type of touchscreen is not an issue.

Best wishes
Josiah

@TiddlyTweeter

unread,
Apr 22, 2017, 12:37:13 PM4/22/17
to TiddlyWiki
Ciao Jeremy


Firefox has a long-standing bug with the events it sends during a drag operation which can lead to the dropzone highlighting not being removed. I’ve spent a ridiculous amount of time on it, and frankly now given up :)

Okay, I won't bother working out why the gif I sent illustrating the issue isn't animating :-) since you know the issue in FF anyway, and have spent too much time on it already. :-)

Josiah
Reply all
Reply to author
Forward
0 new messages