Rearrange JSON array elements via drag&drop

#1

First time dabbling into JSON tiddlers and it seems like my expectations about what is possible were a little high.

I would like to rearrange elements within a JSON array via drag&drop to order my task list manually. Is there a filter operator that returns values like indexes?

Also how would I write the changed order back into the JSON tiddler?

Tiddler “data”:
[ “task 1”, “task 2”, “task 3” ]

Tiddler “render”:
<$droppable>
<$list filter=" [[data]indexes[]] ">
<$draggable>
{{!!title}}
</$draggable>
</$list>
</$droppable>

#2

Welcome tjout!

In other technologies, something like data tiddlers might be a main way to store and manipulate data. But in TiddlyWiki, they are an after-thought. For instance, as you have already discovered, there is no “values” filter operator.

The preferred data storage unit in TW is the tiddler. with an honorable mention going to lists.

In your example, I don’t see a set of index/value pairs. Just a set of values. Which sounds like what you really want is a list-based tool. Lists are very much like arrays in other technologies. You can get what you want almost automatically with the list-links-draggable macro:

<<list-links-draggable tiddler:"mytest" field:"text">>

If tiddler “mytest” contains values

test1
test2
test3

then the macro above will instantly generate a draggable list:

image

Good luck!

3 Likes
#3

This is absolutely amazing! I never tried to use the text field like list field!
Well done Mark!

#4

Thank you Mark, that is awesome!

I have a TW for close to 10 years now and from fiddle about from time to time but sometimes I tend to overengineer stuff because of my programming background :smiley: