# Drag and Drop - Changing the cursor - an example

**URL:** <https://discourse.elm-lang.org/t/drag-and-drop-changing-the-cursor-an-example/9431>\
**Category:** Request Feedback\
**Created:** [November 2, 2023, 10:46pm UTC](https://discourse.elm-lang.org/t/drag-and-drop-changing-the-cursor-an-example/9431 "2023-11-02T22:46:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jachin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jachin/32/1579_2.png) [@jachin](https://discourse.elm-lang.org/u/jachin)\
**Post date:** [November 2, 2023, 10:46pm UTC](https://discourse.elm-lang.org/t/drag-and-drop-changing-the-cursor-an-example/9431/1 "2023-11-02T22:46:53Z")

</div>

hi there

For an app we’re enhancing at my job we are adding drag and drop.

We found [this Elm package for doing the dragging and the dropping](https://package.elm-lang.org/packages/norpan/elm-html5-drag-drop/3.1.4/). It’s mostly working great.

(This might _actually_ be more of a web platform question, if that’s the case, and if this an area where the web platform just isn’t that great that would be interesting to hear)

We were getting to the point where it was time to add a little polish to the dragging and dropping. So why not change the cursor. Well, we’ve been really struggling to do that.

To be able to focus on this problem I thought, I’d enhance the example code in the library we were using to change the cursor and the user drags and drops. The behavior I want is…

- When the user hovers of a draggable element we get the `grab` cursor
- When the user start dragging they see the `grabbing` cursor
- When the user drags over a drop zone they get the `move` cursor

Here’s my PR (I know I should probably make an Ellie… and I will… once… I get things working better).

> <https://github.com/norpan/elm-html5-drag-drop/pull/25>
>
> The main goal of this PR is provide a more elaborate example where the cursor ch…anges as the Elm logo is dragged and dropped.

There are some videos if you don’t want to actually run the code.

In the last update I made, things are (mostly) working in Safari. Chrome and Firefox seem to have a few more issues, but nothing is perfect yet.

Does anyone have any ideas for different approaches that might work better? Or examples where (something a lot like this) is working correctly?

Thank you.

---

<div class="post-metadata">

**Author:** ![passiomatic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/passiomatic/32/1250_2.png) [@passiomatic](https://discourse.elm-lang.org/u/passiomatic)\
**Post date:** [November 3, 2023, 7:30am UTC](https://discourse.elm-lang.org/t/drag-and-drop-changing-the-cursor-an-example/9431/2 "2023-11-03T07:30:08Z")

</div>

That library is great. I’ve only hit a couple of issues while working on Elm Designer ([GitHub - passiomatic/elm-designer: A visual code generator for Elm UI.](https://github.com/passiomatic/elm-designer)). The editor uses that library extensively so you may want to take a look if you need to implement a drag & drop for a tree list or something like that.

At the time I’ve briefly investigated on the changing cursor issue: [Help on changing mouse cursor while dragging · Issue #21 · norpan/elm-html5-drag-drop · GitHub](https://github.com/norpan/elm-html5-drag-drop/issues/21) and unfortunately I’ve little to add to your findings. I was just hoping the library author would add some hooks to expose more data about drag & drop events.

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [November 6, 2023, 10:35am UTC](https://discourse.elm-lang.org/t/drag-and-drop-changing-the-cursor-an-example/9431/3 "2023-11-06T10:35:28Z")

</div>

This won’t really answer your question about changing the cursor but… It is worth being aware of the difference between Html drag-and-drop and drag-and-drop in general, because it can be confusing when reading about the topic what exactly people are talking about.

The Html DnD stuff is primarily aimed at drag and drop between the web and the operating system or other applications. For example, you drag an image from your desktop onto your web app, and that triggers the image upload.

You can also have DnD within a web app. For example, you have some drawing app with a menu of widgets, and you want to drag a widget onto your drawing. In that case you might consider not using Html DnD events to do it, because they do come with some restrictions. You can implement your own DnD in pure Elm and that is often a better path to take for this.

For example, I initially implemented DnD using Html drag-and-drop events. Then I wanted to change the appearance of the thing being dragged depending on where it was dragged. But Html DnD makes this impossible, since you cannot read or write the value of the item being dragged. This is for security reasons, since a malicious script running on your browser could potentially snag something as it drags over it. The solution was to implement our own DnD purely in Elm within our web application to cover the cases where we are just dragging and dropping within the application itself.

If its implemented purely in Elm, you will be able to examine the state of the thing being dragged, and can set up some events to detect when it goes over some area of interest, and set the cursor or whatever you need in response.

---

<div class="post-metadata">

**Author:** ![jachin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jachin/32/1579_2.png) [@jachin](https://discourse.elm-lang.org/u/jachin)\
**Post date:** [November 6, 2023, 9:51pm UTC](https://discourse.elm-lang.org/t/drag-and-drop-changing-the-cursor-an-example/9431/4 "2023-11-06T21:51:57Z")

</div>

@rupert that is super helpful. I had not understood about those 2 different DnD scenarios and I’m sure this is has caused me some real confusion. The good news is, we’re dealing with the second scenario (dragging and HTML element from one place in an Elm app to another place in the same Elm app), so that gives me hope. 🙂 Doing it all in Elm makes a lot of sense.

As I’m thinking about this I can start to see how I would implement this purely in Elm. Did you use the [drag](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event) (and other related events? Or did you _just_ use the `mouseup` and `mousedown`… and `mousemove`… and the other mouse events?

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [November 6, 2023, 10:50pm UTC](https://discourse.elm-lang.org/t/drag-and-drop-changing-the-cursor-an-example/9431/5 "2023-11-06T22:50:49Z")

</div>

We did not use the `drag` event, since that is for HTML drag and drop. We detect the drag by looking at mouse down and then mouse move over a threshold distance. I actually tried to build a slightly higher level API around mouse/touch using the pointer API, to simplify doing things like that, you can find it here: [elm-pointer 1.0.1](https://package.elm-lang.org/packages/the-sett/elm-pointer/latest/)

---

<div class="post-metadata">

**Author:** ![passiomatic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/passiomatic/32/1250_2.png) [@passiomatic](https://discourse.elm-lang.org/u/passiomatic)\
**Post date:** [November 7, 2023, 11:13am UTC](https://discourse.elm-lang.org/t/drag-and-drop-changing-the-cursor-an-example/9431/6 "2023-11-07T11:13:25Z")

</div>

Adding to Rupert’s comment, if you don’t want to use HTML5 D&D there’s also this great article at NoRedInk site describing an alternative approach: [NoRedInk – Drag & Drop without Draggables & Dropzones](https://blog.noredink.com/post/186724971283/drag-drop-without-draggables-dropzones)

---

<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 17, 2023, 11:14am UTC](https://discourse.elm-lang.org/t/drag-and-drop-changing-the-cursor-an-example/9431/7 "2023-11-17T11:14:23Z")

</div>

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