Demo: move an element with the mouse , trough style.left ...

[BobSquarePants]

Hey @PierreQuentel ,

I've use the example located in https://brython.info/demo.html (move an element with the mouse )

But I don't know why the element.left or element,top didn't work for me :/ So I had to adapt it to work with element.style.left etc.. that unfortunatly are not interger, but string.

so here my adaptation, if it can help someone in the futur...

from browser import document

class ElementMove:

    def __init__(self, cible):
        """Make "moving" element movable with the mouse"""
        self.cible = cible
        self.is_moving = False
        self.cible.bind("mousedown", self.start)
        document.bind("mouseup", self.stop)
        cible.style.cursor = "move"

    def start(self, event):
        """When user clicks on the moving element, set boolean is_moving
        to True and store mouse and moving element positions"""
        self.is_moving = True
        self.mouse_pos = [event.x, event.y]

        if self.cible.style.left == '':
            self.elt_pos = [0, 0]
        else:
            self.elt_pos = [int(self.cible.style.left[:-2]), int(self.cible.style.top[:-2])]
        document.bind("mousemove", self.move)
        # prevent default behaviour to avoid selecting the moving element
        event.preventDefault()

    def move(self, event):
        """User moves the mouse"""
        if not self.is_moving:
            return
   
        # set new moving element coordinates
        self.cible.style.left = str(self.elt_pos[0] + event.x - self.mouse_pos[0]) + 'px'
        self.cible.style.top = str(self.elt_pos[1] + event.y - self.mouse_pos[1]) + 'px'


    def stop(self, event):
        """When user releases the mouse button, stop moving the element"""
        self.is_moving = False
        document.unbind("mousemove")

ElementMove(document["foobar"])

out of topic I've wrote you on your @or... email but didn't get a reaction..

Cheers.