# Phaser 3 dom set interactive

**URL:** <https://phaser.discourse.group/t/phaser-3-dom-set-interactive/7344>\
**Category:** Phaser 3\
**Created:** [September 3, 2020, 12:59pm UTC](https://phaser.discourse.group/t/phaser-3-dom-set-interactive/7344 "2020-09-03T12:59:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![conganhpham](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/conganhpham/32/3944_2.png) [@conganhpham](https://phaser.discourse.group/u/conganhpham)\
**Post date:** [September 3, 2020, 12:59pm UTC](https://phaser.discourse.group/t/phaser-3-dom-set-interactive/7344/1 "2020-09-03T12:59:18Z")

</div>

> var config = {  
> type: Phaser.AUTO,  
> width: 800,  
> height: 600,  
> backgroundColor: ‘#2d2d2d’,  
> parent: ‘phaser-example’,  
> scale: {  
> _mode: Phaser.Scale.FIT,  
> parent: ‘phaser-example’,  
> width: 800,  
> height: 600  
> },  
> dom: {  
> createContainer: true  
> },  
> scene: {  
> create: create  
> }  
> };  
> var game = new Phaser.Game(config);  
> function create ()  
> {  
> var element2 = this.add.dom(500, 200, ‘div’, ‘background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); width: 220px; height: 100px; font: 48px Arial; font-weight: bold; color: white; user-select: none;pointer-events: none !important’, ‘Phaser 3’);  
> // element2.setBlendMode(‘HUE’);  
> element2.setInteractive({ useHandCursor: true, draggable: true });  
> // let startX = -element2.originX \* element2.displayWidth;  
> // let startY = -element2.originY \* element2.displayHeight;  
> // element2.input.hitArea = new Phaser.Geom.Rectangle(startX, startY, element2.displayWidth, element2.displayHeight)  
> element2.on(“drag”, (_, dragX, dragY) =\> {  
> element2.x = dragX;  
> element2.y = dragY;  
> });  
> }

when i set interactive for a dom element, dom hit area not true. So a reset hit area as comment lines. But i get an error when mouse inside dom element and i drag element, drag event not fire! Even when i comment the lines.  
The lab link: [https://labs.phaser.io/edit.html?src=src/game%20objects/dom%20element/blend%20mode.js&v=3.24.1](https://labs.phaser.io/edit.html?src=src/game%20objects/dom%20element/blend%20mode.js&v=3.24.1)

---

<div class="post-metadata">

**Author:** ![Thyebe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thyebe/32/3799_2.png) [@Thyebe](https://phaser.discourse.group/u/Thyebe)\
**Post date:** [September 3, 2020, 3:39pm UTC](https://phaser.discourse.group/t/phaser-3-dom-set-interactive/7344/2 "2020-09-03T15:39:27Z")

</div>

Please, put the error message here

---

<div class="post-metadata">

**Author:** ![conganhpham](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/conganhpham/32/3944_2.png) [@conganhpham](https://phaser.discourse.group/u/conganhpham)\
**Post date:** [September 4, 2020, 1:44am UTC](https://phaser.discourse.group/t/phaser-3-dom-set-interactive/7344/3 "2020-09-04T01:44:43Z")

</div>

it is not an error. It’s not logically correct, you can try it by copying and pasting this code into the lab’s link

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [September 7, 2020, 3:07pm UTC](https://phaser.discourse.group/t/phaser-3-dom-set-interactive/7344/4 "2020-09-07T15:07:18Z")

</div>

Hi @conganhpham,  
I had the same problem.  
This is extracted from Phaser docs in reference to [DOMElements](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.DOMElement.html):

> They also cannot be enabled for input. To do that, you have to use the `addListener` method to add native event listeners directly.

So, a possible solution could be something like this:

```javascript
function create() {
    // Phaser DOMElement object
    var phaserDiv = this.add.dom(500, 200, 'div', 'background: blue; width: 220px; height: 100px; font: 48px Arial; font-weight: bold; color: white; user-select: none;', 'Phaser 3');
    phaserDiv.offsetX = 0; // distance from pointer.x to phaserDiv.x
    phaserDiv.offsetY = 0; // distance from pointer.y to phaserDiv.y

    // html DOM element
    let domDiv = phaserDiv.node;
    domDiv.setAttribute('draggable', 'true');
    domDiv.addEventListener('dragstart', (event) =>{
        phaserDiv.alpha = 0;
        phaserDiv.offsetX = event.clientX - phaserDiv.x;
        phaserDiv.offsetY = event.clientY - phaserDiv.y;
    })

    domDiv.addEventListener('dragend', (event) =>{        
        phaserDiv.setPosition(
            event.clientX - phaserDiv.offsetX,
            event.clientY - phaserDiv.offsetY
            );
        phaserDiv.alpha = 1;
    });
}

```

Greetings

---

<div class="post-metadata">

**Author:** ![conganhpham](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/conganhpham/32/3944_2.png) [@conganhpham](https://phaser.discourse.group/u/conganhpham)\
**Post date:** [September 8, 2020, 2:13am UTC](https://phaser.discourse.group/t/phaser-3-dom-set-interactive/7344/5 "2020-09-08T02:13:15Z")

</div>

Thank you for saving me so many days