Public
Edited
Jun 29, 2021
1 star
stage = {
const stage = html`<div class="container">
${elObj}
</div>`
const dragIntent = interact(elObj)
.draggable({
inertia: {
resistance: 10,
minSpeed: 500,
endSpeed: 100,
allowResume: true,
},
modifiers: [
interact.modifiers.restrictRect({
restriction: 'parent',
})
],
listeners: {
move (event) {
console.log(event)
const {x, y} = position.value
position.value = {
x: x + event.dx,
y: y + event.dy,
}
},
}
})
invalidation.then(() => {
dragIntent.unset()
})
return stage
}
position = new View({x: 20, y: 20})
elObj = {
const el = html`<div class="object"></div>`
function setPos({x, y}) {
el.style.left = `${x}px`
el.style.top = `${y}px`
}
setPos(position.value)
bindInput(position, evt => setPos(evt.detail.value), invalidation)
return el
}
html`<style>
.container {
height: 400px;
border: 1px solid #1a1a1a;
background: #f0f0f0;
}
.object {
position: absolute;
background: #4589ff;
width: 50px;
height: 50px;
border-radius: 50%;
}
</style>`
interact = require('interactjs')
import { View, bindInput } from '@andy0130tw/views'
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.
