

javascript(jQueryなど可)を使ってドラッグ可能な要素を作りたいのですがやり方が全くわかりません。

jQuery UIを使えばドラッガブルな要素を作るのは簡単ですが、以下の条件にしたいときはどうしたらよいのでしょうか。

  * 縦には動かせない
  * 横には10pxずつ動かすことができる
  * 指定した範囲を超えることはできない

また、Aの要素に近づいたらAに吸い付いてピタッと止まるというものも教えていただけますか。

あと、こういうUIの動きはどういうところで学べますか?  
今まで決まった動きをするということしかやったことが無いため、これから挑戦しようと思っています。


CC BY-SA 3.0
2015-04-03T07:44:42.973
8719
2015-04-03T08:16:19.070
5855
question
javascript jquery jquery-ui
ドラッグすると10pxずつ動く要素を作りたい


JQuery
UIの[`draggable`](http://api.jqueryui.com/draggable/)で全ての条件を満たすことができると思います。

[code]

    $("#draggable").draggable({
      axis: "x", // 縦には動かせない
      grid: [10, 10], // 横には10pxずつ動かすことができる
      containment: "#container", // 指定した範囲を超えることはできない
      snap: "#anchor", // Aの要素に近づいたらAに吸い付いてピタッと止まる
      snapTolerance: 50
    });
[/code]

[code]

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
    <div id="container" style="background-color: #ccc; width:400px; height: 100px;">
      <div id="draggable" style="background-color: #000; color: #fff; float:left;">Drag me!</div>
      <div id="anchor" style="background-color: #f00; float:right">Snap to me!</div>
    </div>
[/code]


CC BY-SA 3.0
2015-04-03T08:16:19.070
8721
2015-04-03T08:16:19.070
3371
8719
answer