# Get the source of an event

**URL:** <https://discourse.elm-lang.org/t/get-the-source-of-an-event/8773>\
**Category:** Learn\
**Created:** [November 20, 2022, 9:57am UTC](https://discourse.elm-lang.org/t/get-the-source-of-an-event/8773 "2022-11-20T09:57:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![setop](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/setop/32/4331_2.png) [@setop](https://discourse.elm-lang.org/u/setop)\
**Post date:** [November 20, 2022, 9:57am UTC](https://discourse.elm-lang.org/t/get-the-source-of-an-event/8773/1 "2022-11-20T09:57:23Z")

</div>

I wanted to do a small app to move geometric shapes on screen.

I came across [Elm SVG Drag and Drop](https://benthepoet.github.io/elm-svg-drag-and-drop/) which showcase a circle that can be moved around using the mouse, perfect.

But then I looked at the code to see how I could have more then one shape on screen.

The core is [here](https://github.com/benthepoet/elm-svg-drag-and-drop/blob/b31b05843e6a3e6eede6b53fd96b6a6f1f390be8/src/Main.elm#L107) : `circleAttributes circle =[... , onMouseDown MouseDown]`

and [here](https://github.com/benthepoet/elm-svg-drag-and-drop/blob/b31b05843e6a3e6eede6b53fd96b6a6f1f390be8/src/Main.elm#L79) : `MouseDown coordinate -> ( { model | cursor = Just coordinate }, Cmd.none)`

It means there is no obvious way to tell Elm “mousedown” was on _this_ shape.

What is the good approach to handle that ?

---

<div class="post-metadata">

**Author:** ![lucamug](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucamug/32/1764_2.png) [@lucamug](https://discourse.elm-lang.org/u/lucamug)\
**Post date:** [November 20, 2022, 11:11am UTC](https://discourse.elm-lang.org/t/get-the-source-of-an-event/8773/2 "2022-11-20T11:11:43Z")

</div>

Hi @setop,

I didn’t study the code too closely so this suggestion may be wrong.

How about chaging the type from `MouseDown Coordinate` to `MouseDown Int Coordinate`?

Than, in the function that create the circle you can use it this way: `onMouseDown (MouseDown id)` where `id` is some integer that you pass to that function. This integer will be then available in the `update` function.

---

<div class="post-metadata">

**Author:** ![setop](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/setop/32/4331_2.png) [@setop](https://discourse.elm-lang.org/u/setop)\
**Post date:** [November 20, 2022, 11:14am UTC](https://discourse.elm-lang.org/t/get-the-source-of-an-event/8773/3 "2022-11-20T11:14:35Z")

</div>

If I try to “parametrize” event with `onMouseDown MouseDown id` which would be elegant solution, I get `The function 'onMouseDown' expects 1 arguments, but got 2 instead` ☹

---

<div class="post-metadata">

**Author:** ![lucamug](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucamug/32/1764_2.png) [@lucamug](https://discourse.elm-lang.org/u/lucamug)\
**Post date:** [November 20, 2022, 11:15am UTC](https://discourse.elm-lang.org/t/get-the-source-of-an-event/8773/4 "2022-11-20T11:15:35Z")

</div>

You need parenthesis, I added them now in the above message

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [November 30, 2022, 11:16am UTC](https://discourse.elm-lang.org/t/get-the-source-of-an-event/8773/5 "2022-11-30T11:16:22Z")

</div>

Closed on November 30, 2022, 11:16am UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.