Most modern GUI building libraries (e.g. cocoa) support this basic operation in tables or lists: reordering items with a mouse. For example, the drag-and-drop of items in a MacOS finder or app window:

enter image description here

So how would one achieve a basic drag-n-drop reorder with these required features:

  1. The operation is smoothly animated (rows move out of the way)
  2. Thumbnails are carried along with the mouse
  3. Insertion point is highlighted
  4. Works in panes that have content longer than the pane's size
  5. (optional) Undo works

Code to start with:

The current best solution I've found is from user @jVincent for Grid[], but it lacks all the above properties:

SetAttributes[idTag, Protected]
SetAttributes[idSetter, HoldAll]
idSetter[var_] := Function[{content, id}, EventHandler[content, {"MouseMoved" :> (var = id)}]]

SetAttributes[dragNdrop, HoldFirst]; dragNdrop[content_, action_] := 
 DynamicModule[{currentId, from}, EventHandler[Dynamic[Block[{idTag = idSetter[currentId]}, 
     content]], {"MouseDown" :> (from = currentId), 
    "MouseUp" :> action[from, currentId]}]]

mygrid = {{1, 2, 5, 7, 9}, {3, 4, 8, 4, 2}, {5, 12, 7, 3, 8}};
dragNdrop[Grid[MapIndexed[idTag, mygrid, {2}]], action]


Now, this question has been asked in parts before, but none of the solutions have all the features of drag-and-drop behavior:

  • $\begingroup$ I've done this in a pure Graphics environment where I could easily manage and find out what things overlapped, but it'll be harder to do in a more general one. In particular getting thumbnail moves with the mouse which is doable using a hack involving the underpinnings of MouseAppearance, but which would probably be annoying. What's your main use case for this? $\endgroup$ – b3m2a1 Jan 13 at 22:59

Here is a very crude first implementation (code at the bottom):


(note that the updated version is called as `dragDropList[Dynamic@l)

Some notes:

  • The black box serves both as insertion marker and as spacer to move the other items out of the way - obviously, it will need some better styling
  • I'm not sure what the best size for the insertion point is - one option is to make it the same size as the item being moved (not sure how to do that though)
  • As you can see, there is no smooth animation - not sure whether this one is feasible with any kind of acceptable performance
  • The insertion bar is the item currently being moved - this makes re-insertion very easy, since we just have to change the displayed content back. Also, we never have to add stuff to the list, just reorder it
  • The insertion bar is moved every time the cursor is over another item
  • As can be seen, there is some flickering in the order of the items at some points - this is caused by the fact that reordering the items can sometimes bring another item below the cursor (instead of the insertion bar), causing repeated reordering
  • The state of the control lives in several variables:
    • list: The list of items, in their current order
    • iList: The list of indices, in the same order as list
    • indices: The current positions of the elements (given in the original order)
    • dragged: The index of the currently dragged item, or None
    • curPos: The current position of the insertion bar
    • cursor: The cursor to show (includes the moved item)

dragDropList[Dynamic@var_, items_] :=
    set = (var = #) &,
    rawItems = items,
    indices = Range@Length@items,
    dragged = None,
    cursor = "Arrow",
    defCursor = 
     Graphics[{Arrowheads[0.7], Arrow[{{0, 0}, {-.5, 1}}]}, 
      ImageSize -> 16, PlotRange -> {{-1, 0}, {0, 2}}]
   iList = indices;
   list = MapIndexed[
           dragged === #2,

           Graphics[Rectangle[{0, 0}, {1, 1}], AspectRatio -> Full, 
            ImageSize -> {100, 30}],
          "MouseDown" :> (
            dragged = #2;
            curPos = indices[[dragged]];

              cursor = Overlay[{#, defCursor}, Alignment -> Center]]]
          "MouseEntered" :> (
            If[curPos =!= indices[[#2]] && dragged =!= None,
              {newPos = indices[[#2]]},
              {iList, list} = 
               Transpose[({t, d} \[Function] 
                   Insert[d, First@t, newPos]) @@ 
                 TakeDrop[Transpose@{iList, list}, {curPos}]];
              indices = Ordering@iList;
              curPos = newPos
         ] & @@ {#, #2[[1]]} &,
      {Automatic, Automatic},
      Scrollbars -> Automatic
      "MouseUp" :> (
        dragged = None;
         FrontEnd`SetMouseAppearance[cursor = "Arrow"]]
      "MouseEntered" :> FrontEndExecute[FrontEnd`SetMouseAppearance[]],
      "MouseExited" :> 
     PassEventsDown -> True

  • $\begingroup$ This looks great for a crude version, but it doesn't save the edits to anything no? I was hoping to keep the list reordered as some dynamic variable. $\endgroup$ – user5601 Jan 13 at 23:44
  • $\begingroup$ Good point, completely forgot about that - I've updated the code to fix this $\endgroup$ – Lukas Lang Jan 14 at 9:04

I once approached this. I never finished it so let me know if you face any issues:

ResourceFunction["GitHubInstall"]["kubapod", "mgui"]
<< MGUI`

And here is an example:

DynamicModule[{ labels = Range[7] }

 , labels[[1]] = Style[1, "Section"]
 ; Grid[{
     { "Default", "ContinuousAction", "", "ref"}
   , { MSorter[Dynamic@labels]
     , MSorter[Dynamic@labels, ContinuousAction -> True]
     , Button["reset", labels = Range[7], ImageSize -> Small]
     , Dynamic@Column[Pane /@ labels]

enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.