30:[] 2e:{"title":"Drag and Drop API","cells":[{"id":0,"value":"md`# Drag and Drop API`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"HTML = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"{\n HTML; // make sure element is ready\n\n const dragEl = document.querySelector('.drag');\n const dragEl2 = document.querySelector('.drag2');\n function dragstartHandler(ev) {\n ev.dataTransfer.setData(\"text/plain\", ev.target.className);\n ev.dataTransfer.dropEffect = \"move\";\n console.log('dragstart');\n }\n dragEl.addEventListener('dragstart', dragstartHandler);\n dragEl2.addEventListener('dragstart', dragstartHandler);\n\n function dragoverHandler(ev) {\n ev.preventDefault();\n ev.dataTransfer.dropEffect = \"move\";\n console.log('dragover');\n }\n function dropHandler(ev) {\n ev.preventDefault();\n const data = ev.dataTransfer.getData(\"text/plain\");\n console.log('drop');\n console.log('Data transferred:', data);\n }\n\n const targetEl = document.querySelector('.target');\n targetEl.addEventListener('dragover', dragoverHandler);\n targetEl.addEventListener('drop', dropHandler);\n\n return `set up event listeners`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}