Framer Drag

DEMO

CODE

<div class="demo-stage fd-stage"><div class="fd-box">DRAG ME</div></div>

.fd-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:300px; }
.fd-box { width:110px; height:110px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#e91b89,#7b37a8); color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.1em; font-size:.8rem; cursor:grab; user-select:none; touch-action:none; will-change:transform; }
.fd-box.dragging { cursor:grabbing; }

(function(){
  var box = document.querySelector('.fd-box');
  if(!box) return;
  var dragging = false, sx = 0, sy = 0;
  box.addEventListener('pointerdown', function(e){
    dragging = true; sx = e.clientX; sy = e.clientY;
    box.classList.add('dragging'); box.setPointerCapture(e.pointerId); box.style.transition = 'none';
  });
  box.addEventListener('pointermove', function(e){
    if(!dragging) return;
    box.style.transform = 'translate(' + (e.clientX - sx) + 'px,' + (e.clientY - sy) + 'px)';
  });
  box.addEventListener('pointerup', function(){
    dragging = false; box.classList.remove('dragging');
    box.style.transition = 'transform .5s cubic-bezier(.34,1.56,.64,1)';
    box.style.transform = 'translate(0,0)';
  });
})();

ライブデモはFramer Motion不要のPointer Events版です。下がReact + Framer Motionの実装で、drag と dragSnapToOrigin が「掴んで離すと中心に弾性で戻る」を担います。

import { motion } from "framer-motion"

export default function Draggable() {
  return (
    <motion.div
      drag
      dragSnapToOrigin
      whileTap={{ cursor: "grabbing" }}
      dragTransition={{ bounceStiffness: 300, bounceDamping: 18 }}
      className="box"
    >
      DRAG ME
    </motion.div>
  )
}

AI PROMPT

ドラッグして離すと弾んで中心に戻る要素をFramer Motionで作って。<motion.div drag dragSnapToOrigin dragTransition={{ bounceStiffness:300, bounceDamping:18 }} />。drag で掴んで動かせ、dragSnapToOrigin で離すと原点へ、dragTransitionのbounce設定で弾性が出る。素のJSなら pointerdown/move/up で transform を更新し、up時に transition を付けて translate(0,0) へ戻す。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。