Drag and Drop an Attached Cell

Question

I'm trying to create an attached cell that can be mouse dragged. I'm envisioning mouse-dragging the blue header bar to bring the entire header and the graphic to a new location at which point both will be locked to that location. The graphic needs to be rotatable by mouse-drag.

This is what I have so far:

AttachCell[EvaluationNotebook[], DynamicModule[{pt = {0, 0}},
   
   EventHandler[Graphics[Inset[Style[Grid[{
         
         {Button["Close", NotebookDelete[EvaluationCell[]], 
           ImageSize -> All, Appearance -> Button]}, {Plot3D[
           Sin[x y], {x, 1, 4}, {y, 1, 3}, ImageSize -> 300]}},
        
        Frame -> True,
        Background -> {None, {LightBlue, White}}], 
       Deployed -> False],
      Dynamic[pt]],
     
     PlotRange -> 10, ImageSize -> Scaled[1], Frame -> False],
    
    {"MouseDragged" :> (pt = MousePosition["Graphics"])}, 
    PassEventsDown -> True, PassEventsUp -> True]], Center, 0, 
  Center];

Notice in the video below I can drag the graphic anywhere using the header. However, a mouse-drag inside the graphic is both rotating the graphic and dragging the graphic causing the strange behavior. I want the grid draggable but only from the blue header as I still want to rotate the graphic. Any ideas?

Answer 1

Update

My code works well if linksnooper is used (see the video).

This may be related to the change of performance, event frequency, dynamic update strategy or caches.

I'm still looking for a way to configure that.

---

Discussion

Quite strange, this sometimes works and sometimes doesn't work:

cell = With[{plot = ToBoxes@Plot3D[Sin[x y], {x, 1, 4}, {y, 1, 3}, ImageSize -> 300]},
    Cell[BoxData@DynamicModuleBox[{pt = {0, 0}},
        GraphicsBox[InsetBox[
            PanelBox@StyleBox[
                GridBox[{
                    {TagBox[
                        ButtonBox["Drag to move and click to close", ButtonFunction :> NotebookDelete[EvaluationCell[]]]
                    , EventHandlerTag@{"MouseDragged" :> (pt = MousePosition["Graphics"]), PassEventsDown -> True, PassEventsUp -> True, Method -> "Preemptive"}]},
                    {DynamicBox[ToBoxes[pt,StandardForm]]},
                    {plot}
                }]
            , Deployed -> False]
        , Dynamic@pt, Top]
        , PlotRange -> 10, ImageSize -> Scaled@1, Frame -> False, Method->"Preemptive"]
    ]
    , "Text"
    , Editable -> False]
];
AttachCell[EvaluationNotebook[], cell, Center, 0, Center]

Once it works, you can try to drag the 3D graphics and meanwhile move the mouse to the button for severaltimes, then it may break down again.

And if you try cell //CellPrint instead, that works stably.

Answer 2

This works. Instead of attaching the graphic using dynamic Graphics Inset, I attached it directly to the notebook using the Attached Cell. To move the attached cell around the notebook I used event handlers that refresh on mousedrags while deleting their traces. That was tricky. . I think this is cleaner... but a bit harder to do. Here is a video and code below. If anyone wants to clean up my code... please do. I'm not much of a programmer and would like to see how I can be more efficient.

mo = EventHandler[
   DynamicModule[{x = 0}, Button["Close"], 
    Initialization :> (k = 
       AttachCell[EvaluationBox[], 
        DynamicModule[{}, 
         Style[
          Plot3D[Sin[x y], {x, 1, 4}, {y, 1, 3}, ImageSize -> 300, 
           SphericalRegion -> True, ImagePadding -> 10, 
           Background -> LightYellow, PerformanceGoal -> "Quality"], 
          Deployed -> False], InheritScope -> True], Bottom, 0, Top])],
   {"MouseClicked" :> (NotebookDelete[ParentCell[k]])}];

g[Dynamic[k_]] := 
  SetOptions[k, CellEventActions -> {"MouseDragged" :> (None),
     "MouseUp" :> (SelectionMove[InputNotebook[], Next, Cell];
       SelectionMove[InputNotebook[], Before, CellContents]), 
     PassEventsDown -> True
     }];

f[Dynamic[attachedCell_, init_]] := 
  SetOptions[ParentCell[k], CellEventActions -> {
     "MouseDragged" :> (
       NotebookDelete[init];
       NotebookDelete[attachedCell];
       attachedCell = 
        AttachCell[InputNotebook[], mo, {Left, Top}, 
         Offset[MousePosition["WindowAbsolute"]*{1, -1}, 0]];
       g[Dynamic[k]];
       f[Dynamic[attachedCell, init]];
       
       ), PassEventsDown -> True}];

DynamicModule[{init, attachedCell, p},
 
 Button["Start",
  SelectionMove[InputNotebook[], Before, CellContents];
  init = AttachCell[InputNotebook[], mo, Center, 0, Center];
  SetOptions[EvaluationNotebook[], 
   CellEventActions -> {"MouseDragged" :> (None)}];
  
  SetOptions[k, CellEventActions -> {"MouseDragged" :> (None),
     "MouseUp" :> (SelectionMove[InputNotebook[], Next, Cell];
       SelectionMove[InputNotebook[], Before, CellContents]), 
     PassEventsDown -> True
     }];
  SetOptions[ParentCell[k], CellEventActions -> {
     "MouseDragged" :> (
       NotebookDelete[init];
       NotebookDelete[attachedCell];
       attachedCell = 
        AttachCell[InputNotebook[], mo, {Left, Top}, 
         Offset[MousePosition["WindowAbsolute"]*{1, -1}, 0]];
       
       g[Dynamic[k]];
       f[Dynamic[attachedCell, init]];
       
       
       ), PassEventsDown -> True}]
  ]]