# how prevent event with referred mutable variable in drag event?

**URL:** <https://talk.observablehq.com/t/how-prevent-event-with-referred-mutable-variable-in-drag-event/2694>\
**Category:** Help\
**Created:** [December 28, 2019, 7:58am UTC](https://talk.observablehq.com/t/how-prevent-event-with-referred-mutable-variable-in-drag-event/2694 "2019-12-28T07:58:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![shallwefootball](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shallwefootball/32/1109_2.png) [@shallwefootball](https://talk.observablehq.com/u/shallwefootball)\
**Post date:** [December 28, 2019, 7:58am UTC](https://talk.observablehq.com/t/how-prevent-event-with-referred-mutable-variable-in-drag-event/2694/1 "2019-12-28T07:58:37Z")

</div>

i want to drag to circle  
tried to code this

> **[Refered mutable variable in emit events](https://observablehq.com/@shallwefootball/refered-mutable-variable-in-emit-events)**
>
> An Observable notebook by Dongkeon Kim.

but the position is not intended.

I think mutable variable emit event in global scope. (read this [Use mutability to draw draggable globe on canvas?](https://talk.observablehq.com/t/use-mutability-to-draw-draggable-globe-on-canvas/639/3) )

can you explain this, please?

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [December 28, 2019, 9:27pm UTC](https://talk.observablehq.com/t/how-prevent-event-with-referred-mutable-variable-in-drag-event/2694/2 "2019-12-28T21:27:11Z")

</div>

Your approach isn’t working because when you reassign `mutable data` in `update`, your SVG element is recreated (because that cell references `data`), which somehow confuses the apparent coordinates of the pointer.

If you want to drag circles in SVG, I recommend this approach:

> **[Drag (SVG)](https://observablehq.com/@d3/circle-dragging-i)**
>
> An Observable notebook by D3.

There are a variety of other examples of d3.drag here:

[https://observablehq.com/collection/@d3/d3-drag](https://observablehq.com/collection/@d3/d3-drag)

---

<div class="post-metadata">

**Author:** ![shallwefootball](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shallwefootball/32/1109_2.png) [@shallwefootball](https://talk.observablehq.com/u/shallwefootball)\
**Post date:** [December 29, 2019, 6:25am UTC](https://talk.observablehq.com/t/how-prevent-event-with-referred-mutable-variable-in-drag-event/2694/3 "2019-12-29T06:25:12Z")

</div>

Thanks, Mike.  
but can I use mutable data in `update`?  
I want to see to changing position values like [https://observablehq.com/@d3/hello-d3-drag?collection=@d3/d3-drag](https://observablehq.com/@d3/hello-d3-drag?collection=@d3/d3-drag) in `circles` cell by dragging circle.

i think that best way was using `mutable` before.

Is there nothing way to except to use to `viewof` ?

thanks.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [December 29, 2019, 4:23pm UTC](https://talk.observablehq.com/t/how-prevent-event-with-referred-mutable-variable-in-drag-event/2694/4 "2019-12-29T16:23:38Z")

</div>

@shallwefootball Just in case you’re trying to create a 2D range slider, there’s one at

> **[2D Slider](https://observablehq.com/d/98bbb19bf9e859ee)**
>
> An Observable notebook by Fabian Iwand.

(with another example in [https://observablehq.com/@mootari/pixel-probing](https://observablehq.com/@mootari/pixel-probing)).