50 lines
1.2 KiB
JavaScript
50 lines
1.2 KiB
JavaScript
import { Component, useRef, useState } from "@odoo/owl";
|
|
import { registry } from "@web/core/registry";
|
|
import { standardActionServiceProps } from "@web/webclient/actions/action_service";
|
|
|
|
class MovableDiv extends Component {
|
|
static template = "movable-div";
|
|
static components = {};
|
|
static props = {
|
|
...standardActionServiceProps,
|
|
};
|
|
|
|
setup() {
|
|
this.containerRef = useRef("container");
|
|
|
|
this.state = useState({
|
|
cdLeft: 800,
|
|
cdTop: 100,
|
|
cLeft: 700,
|
|
cTop: 100
|
|
});
|
|
|
|
this.dragging = undefined;
|
|
}
|
|
|
|
onMouseDown(event){
|
|
if (event.target.classList.contains("diamond")){
|
|
this.dragging = "cd";
|
|
} else if (event.target.classList.contains("circle")){
|
|
this.dragging = "c";
|
|
}
|
|
}
|
|
|
|
onMouseUp(event){
|
|
this.dragging = undefined;
|
|
}
|
|
|
|
onMouseMove(event){
|
|
if (this.dragging === "cd"){
|
|
this.state.cdLeft += event.movementX;
|
|
this.state.cdTop += event.movementY;
|
|
} else if (this.dragging === "c"){
|
|
this.state.cLeft += event.movementX;
|
|
this.state.cTop += event.movementY;
|
|
}
|
|
}
|
|
}
|
|
|
|
registry.category("actions").add("movable_div", MovableDiv);
|
|
|