Wolfram Function Repository

Instant-use add-on functions for the Wolfram Language

Function Repository Resource:

 DragRearrange

Source Notebook

Create a dynamic interface for ordering items in a list

Contributed by: 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.

Details and Options

In addition to most Graphics options, the following options are available:
Appearance"Vertical"orientation or dimensions of the grid of items
"DragElementFunction"Automaticthe function used to generate dragable item appearance
"ItemFrameStyle"RGBColor[0.32, 0.63, 0.77]the frame color around dragable items
"ItemUnselectedBackground"RGBColor[0.82, 0.92, 0.95]the background color for dragable items
"ItemSelectedBackground"RGBColor[0.26, 0.68, 0.99]the background color around dragable items as they are dragged
EnabledTruewhether the interface is active

The options “ItemFrameStyle", “ItemUnselectedBackground" and “ItemSelectedBackground" are only used when “DragElementFunction“→Automatic is used.

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 (2) 

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]=

If all items are images of the same dimensions, no frame is drawn and AspectRatio→Automatic attempts to preserve the image proportions:

In[6]:=
(* Evaluate this cell to get the example input *) CloudGet["https://www.wolframcloud.com/obj/e3f13256-3ffb-4058-b01f-4fb508fc119c"]
Out[6]=

Options (4) 

Make items that are draggable horizontally with Appearance:

In[7]:=
list = {"Red", "Green", "Blue"}; ResourceFunction["DragRearrange"][Dynamic[list], Appearance -> "Horizontal"]
Out[7]=

Appearance specify a grid with Automatic, {Automatic,n}, {n,Automatic} or {n1,n2}. The value Automatic attempts to find the squarest partition that yields equal length rows:

In[8]:=
ResourceFunction["DragRearrange"][Range[12], Appearance -> Automatic]
Out[8]=
In[9]:=
ResourceFunction["DragRearrange"][Range[15], Appearance -> {5, Automatic}]
Out[9]=

If an arrangement results in unequal rows, the last positions will not be filled:

In[10]:=
ResourceFunction["DragRearrange"][Range[11], Appearance -> {5, Automatic}]
Out[10]=

Standard options for Graphics are supported:

In[11]:=
list = {"Red", "Green", "Blue"}; ResourceFunction["DragRearrange"][Dynamic[list], Appearance -> "Horizontal", AspectRatio -> 1/5]
Out[11]=

You can create custom graphics for the draggable items, by providing a function that accepts the label, a Boolean indicating whether the item is selected:

In[12]:=
myItem[label_, selectedQ_] := Graphics[{If[selectedQ, Pink, Yellow], EdgeForm[Black], Disk[{0, 0}, 1], Black, Text[label, {0, 0}]}, AspectRatio -> 1/3, PlotRange -> {{-2, 2}, {-2, 2}}]
In[13]:=
list = {"Red", "Green", "Blue"}; ResourceFunction["DragRearrange"][Dynamic[list], "DragElementFunction" -> myItem]
Out[13]=

The option Enabled can accept a Dynamic argument. For example, disable the interface if the "Red" item is moved from the first position:

In[14]:=
list2 = {"Red", "Green", "Blue"}; ResourceFunction["DragRearrange"][Dynamic[list2], Enabled -> Dynamic[list2[[1]] === "Red"]]
Out[15]=

Possible Issues (2) 

If Appearance has been used with fixed row and column counts, contents may not be visible if the list of items is, or becomes, too long:

In[16]:=
list = Range[6]; ResourceFunction["DragRearrange"][Dynamic[list], Appearance -> {2, 2}]
Out[17]=

Using Automatic in at least one dimension can adapt to changing contents of the Dynamic variable:

In[18]:=
ResourceFunction["DragRearrange"][Dynamic[list], Appearance -> {3, Automatic}]
Out[18]=

Publisher

Jon McLoone

Requirements

Wolfram Language 11.3 (March 2018) or above

Version History

  • 3.1.0 – 06 May 2022
  • 3.0.0 – 18 June 2020
  • 2.0.0 – 27 May 2020
  • 1.0.0 – 17 December 2018

Related Resources

License Information