Wolfram Research

Wolfram Function Repository

Instant-use add-on functions for the Wolfram Language

Function Repository Resource:

 DragRearrange (3.0.0) current version: 3.1.0 »

Source Notebook

Create a dynamic interface for ordering items in a list

Contributed by: Jon McLoone  |  Jon McLoone

ResourceFunction["DragRearrange"][Dynamic[list]]

creates a dynamic interface in which you can reorder the elements of list by dragging them with the mouse.

Examples

Basic Examples (1) 

Define a symbol containing a list of items and then create a dynamic interface for reordering the items in the list:

In[1]:=
list = {"Red", "Green", "Blue"};
In[2]:=
ResourceFunction["DragRearrange"][Dynamic[list]]
Out[2]=
In[3]:=
Dynamic[list]
Out[3]=

Scope (1) 

DragRearrange supports two-argument Dynamic. Use a function to cause a side-effect after interaction:

In[4]:=
list = {"Red", "Green", "Blue"};
In[5]:=
DynamicModule[{top = ""}, Column[{Dynamic[top], ResourceFunction["DragRearrange"][ Dynamic[list, Function[{val, var}, var = val; top = First[var], {HoldAll}]]]}]]
Out[5]=

Options (3) 

Make items that are draggable horizontally with Appearance:

In[6]:=
ResourceFunction["DragRearrange"][Dynamic[list], Appearance -> "Horizontal"]
Out[6]=

Standard options for Graphics are supported:

In[7]:=
ResourceFunction["DragRearrange"][Dynamic[list], Appearance -> "Horizontal", AspectRatio -> 1/5]
Out[7]=

You can create custom graphics for the draggable items, by providing a function that accepts the label, a Boolean and Graphics options:

In[8]:=
myItem[label_, selectedQ_, opts___] := Graphics[{If[selectedQ, Pink, Yellow], EdgeForm[Black], Disk[{0, 0}, 1], Black, Text[label, {0, 0}]}, AspectRatio -> 1/3, PlotRange -> {{-2, 2}, {-2, 2}}, opts]
In[9]:=
ResourceFunction["DragRearrange"][Dynamic[list], "DragElementFunction" -> myItem]
Out[9]=

Requirements

Wolfram Language 11.3 (March 2018) or above

Version History

  • 3.1.0 – 06 May 2022
  • 3.0.0 – 18 June 2020

Related Resources

License Information