質問: javascript(jQueryなど可)を使ってドラッグ可能な要素を作りたいのですがやり方が全くわかりません。 jQuery UIを使えばドラッガブルな要素を作るのは簡単ですが、以下の条件にしたいときはどうしたらよいのでしょうか。 * 縦には動かせない * 横には10pxずつ動かすことができる * 指定した範囲を超えることはできない また、Aの要素に近づいたらAに吸い付いてピタッと止まるというものも教えていただけますか。 あと、こういうUIの動きはどういうところで学べますか? 今まで決まった動きをするということしかやったことが無いため、これから挑戦しようと思っています。
回答: JQuery UIの`draggable`で全ての条件を満たすことができると思います。 ``` $("#draggable").draggable({ axis: "x", // 縦には動かせない grid: [10, 10], // 横には10pxずつ動かすことができる containment: "#container", // 指定した範囲を超えることはできない snap: "#anchor", // Aの要素に近づいたらAに吸い付いてピタッと止まる snapTolerance: 50 }); ``` ``` Drag me! Snap to me! ```