Uncaught TypeError: this.getXY is not a function

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

J'ai un problème avec une classe en JS. La fonction getXY() n'est pas une fonction quand je l'appelle depuis la fonction onMove() (li.29) mais par contre elle fonctionne très bien depuis la fonction onStart() (li.18-19)

Voici le code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
class Sortable {
    constructor(el) {
        //var self = this;
        this.element = el
        this.items = document.querySelectorAll(this.element.dataset.sortable)
        this.itemWidth = this.items[0].getBoundingClientRect().width
        this.itemHeight = this.items[0].offsetHeight
        this.cols = Math.floor(this.element.offsetWidth / this.itemWidth)
        this.onStart()
    }

    onStart() {
        Array.from(this.items).forEach((item) => {
            item.style.position = "absolute";
            item.style.top = "0px";
            item.style.left = "0px";
            const position = item.dataset.position;
            const x = this.getXY(position).x // OK
            const y = this.getXY(position).y // OK
            item.style.transform = `translate3D(${x}px, ${y}px, 0)`
        })

        this.element.style.height = (this.itemHeight * Math.ceil(this.items.length / this.cols)) + "px"

        interact(this.element.dataset.sortable, {context: this.element}).draggable({inertia: false, manualStart: false, onmove: this.onMove})
    }

    onMove(e) {
        const p = this.getXY(e.target.dataset.position) // is not a function
        const x = p.x + e.clientX - e.clientX0
        const y = p.y + e.clientY - e.clientY0
        e.target.style.transform = `translate3D(${x}px, ${y}px, 0)`
    }

    getXY(position) {
        const x = this.itemWidth * (position % this.cols)
        const y = this.itemHeight * Math.floor(position / this.cols)

        return {
            x: x,
            y: y
        }
    }

}

window.addEventListener('load', () => new Sortable(document.querySelector('#sort')))

Merci d'avance !! :)

Édité par artragis

+0 -0

On dirait que le this est modifié par ton interact. Je ne sais pas vraiment ce que cette fonction fait, un console.log(this) t'aidera très probablement. Ce n'est pas parce que ta fonction est dans une "classe" (parenthèse parce qu'on parle de Javascript, c'est du prototype based) que le this ne peut pas être modifié.

Édité par tleb

It goes against the grain of modern education to teach children to program. What fun is there in making plans, acquiring discipline in organizing thoughts, devoting attention to detail and learning to be self-critical? – Perlis

+0 -0

C'est ça, le contexte n'était pas bon. J'espère que tu as au moins compris ce que la solution fait, et que tu ne l'as pas utilisé aveuglement.

It goes against the grain of modern education to teach children to program. What fun is there in making plans, acquiring discipline in organizing thoughts, devoting attention to detail and learning to be self-critical? – Perlis

+0 -0
Auteur du sujet

Oui je connaissais le .bind(this) mais je pensais que faire un let self = this ()et self.getXY(e.target.dataset.position) était équivalent or cela ne fonctionnais pas.

Édité par Matiuso

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte