ELMで文字入りの円をドラッグ＆ドロップするには

文字入りの円をドラッグ＆ドロップするアプリをELMで作れないか考えてみた。
ググると、Svgを使って四角をドラッグ＆ドロップする例があった。
https://package.elm-lang.org/packages/zaboco/elm-draggable/latest/
Svgライブラリの説明もあり
https://package.elm-lang.org/packages/elm/svg/latest/Svg
SVG描画で円の中心にテキストを表示する方法も参考にさせてもらいました。
ELMはエラーメッセージが詳しいので、それも助けになります。

いろいろ試行錯誤しながら　結局、ライブラリの説明の中の
g,circle,text_はList (Attribute msg) -> List (Svg msg) -> Svg msg
textがString -> Svg msg
という型の説明をもとに、組み立てるといいようでした。

一つ目のリンクのMultipleTargetsExample.elmのSvg.rectの部分を、以下のようにするとうまくいきました。

Svg.rect
        [ num Attr.width <| getX boxSize
        , num Attr.height <| getY boxSize
        , num Attr.x (getX position)
        , num Attr.y (getY position)
        , Attr.fill color
        , Attr.stroke "black"
        , Attr.cursor "move"
        , Draggable.mouseTrigger id DragMsg
        , onMouseUp StopDragging
        ]
        []
を、以下のように変更

   Svg.g
     [     Attr.cursor "move"
        , Draggable.mouseTrigger id DragMsg
        , onMouseUp StopDragging]
     [
      Svg.circle
       [
          num Attr.r <| getY boxSize
        , num Attr.cx (getX position)
        , num Attr.cy (getY position)
        , Attr.fill color
        , Attr.stroke "black"
 
       ]
       [ ]
       ,
       Svg.text_ [
         num Attr.x (getX position)
        , num Attr.y (getY position)
         ,  Attr.stroke "black"
             ]
         [Svg.text "abcde"]
     
     ]