// Dragging example works in Firefox but has an offset issue with Chrome

const draggables = { 
    1: {x: 0, y: 0, action: `alert("Hello from draggable #1")`},
    2: {x: 0, y: 0, action: `alert("Hello from draggable #2")`},
    3: {x: 0, y: 0, action: `alert("Hello from draggable #3")`},
    4: {x: 0, y: 0, action: `alert("Hello from draggable #4")`},
    5: {x: 0, y: 0, "name": "In memory of James R. Beniger", action: `open("https://en.wikipedia.org/wiki/Beniger,_James_R.")` },
    6: {x: 0, y: 0, "name": "Log Draggables", action: `console.log("draggables", context.draggables)` },
}

let dragStart

show(() => {
    return m("div.bg-gray.h5.w100", { ondragover: (e) => e.preventDefault(), ondrop: (e) => e.preventDefault() },
        Object.keys(draggables).map((number) => m("div.di.ba.pa2.ma2.relative.bg-green", {
            draggable: true,
            style: {
                cursor: "move",
                top: draggables[number].y + "px",
                left: draggables[number].x + "px",
            },
            ondragstart: (e) => {
                dragStart = {x: e.screenX, y: e.screenY}
                e.dataTransfer.setData('text/plain', number)
                e.dataTransfer.effectAllowed = "move"
            },
            ondragend: (e) => {
                const d = draggables[number]
                const s = dragStart;
                draggables[number].x = d.x + e.screenX - s.x
                draggables[number].y = d.y + e.screenY - s.y
            },
            onclick: draggables[number].action ? function() { const context = { draggables }; eval(draggables[number].action) }: (() => undefined)
        }, draggables[number].name || ("Drag me! " + number)))
      )
    }, ".bg-blue.br4"
)

@@ -308,50 +308,62 @@
  0, 
-action: %60alert(%22Hello from draggable #4%22
+name: %22Make new item%22, action: %60makeNewItem(context
 )%60
+ 
 %7D,%0A 
@@ -381,22 +381,20 @@
 , y: 0, 
-%22
 name
-%22
 : %22In me
@@ -513,14 +513,12 @@
  0, 
-%22
 name
-%22
 : %22L
@@ -595,16 +595,227 @@
 %60 %7D,%0A%7D%0A%0A
+function makeNewItem(context) %7B%0A    console.log(%22makeNewItem%22, context)%0A    const name = prompt(%22new name?%22)%0A    if (!name) return%0A    context.draggables%5Bnew Date().toISOString()%5D = %7Bx: 0, y: 0, name: name %7D%0A%7D%0A%0A
 let drag

Update draggables-extended.js to have draggable that makes draggables