📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
HTML = html`
<div class="board">
<div class="drag" draggable="true"></div>
<div class="drag2" draggable="true"></div>
<div class="target"></div>
</div>
`
{
HTML; // make sure element is ready
const dragEl = document.querySelector('.drag');
const dragEl2 = document.querySelector('.drag2');
function dragstartHandler(ev) {
ev.dataTransfer.setData("text/plain", ev.target.className);
ev.dataTransfer.dropEffect = "move";
console.log('dragstart');
}
dragEl.addEventListener('dragstart', dragstartHandler);
dragEl2.addEventListener('dragstart', dragstartHandler);
function dragoverHandler(ev) {
ev.preventDefault();
ev.dataTransfer.dropEffect = "move";
console.log('dragover');
}
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text/plain");
console.log('drop');
console.log('Data transferred:', data);
}
const targetEl = document.querySelector('.target');
targetEl.addEventListener('dragover', dragoverHandler);
targetEl.addEventListener('drop', dropHandler);
return `set up event listeners`;
}
html`
<style>
.board {
background: lightgrey;
display: flex;
justify-content: space-between;
padding: 10px;
}
.drag {
background: yellow;
width:100px;
height:100px;
}
.drag2 {
background: blue;
width: 50px;
height: 50px;
}
.target {
background:green;
width:100px;
height:100px;
}
</style>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
