Drag, throw, snap back
One card springs home. The other can be thrown and stops inside its box.
Pull me
Throw me
Drag the cardsEdit
.drag-zone {
position: relative;
height: 100%;
}
.drag-card {
--k-drag: both;
position: absolute;
top: calc(50% - 60px);
display: grid;
place-items: center;
width: 120px;
height: 120px;
border-radius: 22px;
color: #fff;
font-weight: 600;
cursor: grab;
user-select: none;
}
.drag-card[data-kinesis-dragging] {
cursor: grabbing;
}
.drag-card--return {
--k-release: return;
--k-motion: bouncy;
left: calc(30% - 60px);
background: #ff5d6c;
}
.drag-card--throw {
--k-release: throw;
--k-bounds: parent;
left: calc(70% - 60px);
background: #2f6bff;
}