Any hints on how to drag-and-drop an image?

[cclauss]

https://pyscript.com/@cclauss/domino is my attempt to drag and drop an image in pyscript.

How can I detect if the user has clicked on the image and how can I move that image to allow the user to drag and drop it?

The Tic-Tac-Toe demo has a .click() method but I cannot figure out how to enable that method on this image.

I was only able to find @Neon22's comments on dnd at #1687 (comment)

[Neon22]

Chris laffra's ltk handles this well.

• https://laffra.github.io/ltk/?runtime=py&tab=5
• checkout the custom tab.

I have recently also implemented my own more specific dragndrop in SVG using mousedown/move/leave events and keeping track of offsets using global variables. Here is a good reference:

• https://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/

[cclauss]

Does not work on an iPad.

I got dnd working in https://cclauss.pyscriptapps.com/click-and-drag-event and domino but I need more time to get it to mesh into gameplay.

[Neon22]

I haven't got an ipad sorry. I know older versions of the ipad browser do not support esm as well. There was some report on the discord about it but can't find it. One of the people using my weaving file converter had that problem until they allowed apple to update.

BTW. I am doing some DnD of svg like yours but I am leaving the svg as a string and inserting into .html when I want to display. So I have a class which (in your case) would build domino svg strings and reference them via a dictionary.
I can modify the dom dynamically after I added a todom() method to the svg.py file I am using. (You may not need this). I found this better than svgwrite which I used to use a lot. There is a project below you can look at it but is not lightweight anymore. Sorry about the ugliness of my code.
I am using ltk for all the layout but you can see the event assignments and global functions which track the handle moving.
The handle is the bit of all this you might find useful: (in main.py)

• When building the UI the svg does not exist yet - so I use: ltk.schedule(hookup_events, "SVG hookup_events") # connect events which will be called when everything is set; to attach events
• In my hookup_events() I connect the mouseevents to the element in the dom like so"

def hookup_events():
    """
    Handle events for resizing
    - run once
    """
    handle = ltk.find("#handle")
    #print("setting up handle")
    handle.on("mousedown", ltk.proxy(lambda event: resize_draft_start(event)))
    handle.on("mousemove", ltk.proxy(lambda event: resize_draft(event)))
    handle.on("mouseup", ltk.proxy(lambda event: resize_draft_end(event)))
    handle.on("mouseleave", ltk.proxy(lambda event: resize_draft_end(event)))

Events look like this: (lot of work with offsets so the actual spot you click on is referenced when moving)

#globals
g_h_selected = None
g_h_selected_offset = None
g_h_offset = None

def get_mouse_position(event, el):
    """
    Get the screen coords of the mouse
    - for dragging events
    """
    CTM = el.getScreenCTM()
    x = (event.clientX - CTM.e) / CTM.a
    y = (event.clientY - CTM.f) / CTM.d
    return [x,y]

def start_drag(event):
    """
    Used when we want to Drag:
    - calc offsets for simple math adj of moving element
    """
    global g_h_selected, g_h_selected_offset, g_h_offset
    g_h_selected = event.target
    print(event.target)
    g_h_offset = get_mouse_position(event, g_h_selected)
    g_h_selected_offset = get_mouse_position(event, g_h_selected)
    #print("start resize", g_h_offset)
    g_h_selected_offset[0] -= float(g_h_selected.getAttributeNS(None,"x"))
    g_h_selected_offset[1] -= float(g_h_selected.getAttributeNS(None,"y"))

def resize_draft_start(event):
    """
    Setup to start dragging the handle.
    - hide pattern maybe ?
    """
    #event.preventDefault()
    start_drag(event)
    # empty the drawn selection,targets
    if loom.current_selection:
        loom.clear_selection()
    # ignore the cell row detection box (we collide)
    ltk.find("#cells_butside_rect").addClass("ignored")
    #! empty the pattern

def resize_draft(event):
    """
    Active mouse motion while dragging
    - resize the draft_bg etc
    - g_h_selected will be "#handle"
    """
    #event.preventDefault()
    if g_h_selected:
        x,y = get_mouse_position(event, g_h_selected)
        #! check and clamp to max,min size
        #print("resize me", x-g_h_offset[0], y-g_h_offset[1])
        offset = [x - g_h_selected_offset[0], y - g_h_selected_offset[1]]
        #! Maybe Quantize to steps > 5 (would draw less often)
        # reposition handle box
        g_h_selected.setAttributeNS(None, "x", offset[0])
        g_h_selected.setAttributeNS(None, "y", offset[1])
        #
        svg = loom.create_draft_bg(x-g_h_offset[0])
        ltk.find("#draft_bg").html(svg) 
        # resize the baserect box
        grid_bbox = ltk.find("#BG_grid").children()[0].getBBox()
        loom.resize_draftUI_box(grid_bbox)
        # redraw handle box and interior
        # get curr handle w,h for handle redraw
        w = float(g_h_selected.getAttribute("width"))
        h = float(g_h_selected.getAttribute("height"))
        offset.extend([w,h])
        for [id,slot,value] in loom.draft_ui_layer.update_handle(offset):
            ltk.window.document.querySelector(id).setAttribute(slot, value)

def resize_draft_end(event):
    """
    Cleanup when dropping resize handle:
    - set grid size for redraws,
    - redraw handle in correct pos
    """
    global g_h_selected
    if g_h_selected:
        #print("end resize", get_mouse_position(event, g_h_selected))
        # need to reset the handle to proper place
        bbox = ltk.find("#BG_grid").children()[0].getBBox()
        # reset self.draft_width variable etc
        loom.draft_width = bbox.width
        loom.finalise_draft_move()
        g_h_selected = None
        # redraw the drawn selection,highlights
        if loom.current_selection:
            loom.rebuild_selection()
        # reenable cell collision box
        ltk.find("#cells_butside_rect").removeClass("ignored")
        #! redraw the pattern

Obviously there is a lot of garbage in there to do with what my specifc program is doing.
Anyway hope this is helpful

• https://pyscript.com/@neon22/tablet-weaver/latest
• Also I will be removing the handle soon as I am now using the splitpane to do the same job.