JQueryのdraggableで移動させつつ座標も送る

備忘録的なもんですが。

JQueryのdraggableで移動させるのはいいんですが、移動後の座標を記録しておきたいことがありましたのでちょいちょい書いたもんです。

  <script>
    $(function()
    {
      $( "#dragyouso" ).draggable({
        opacity: 0.5,
        grid: [5, 5],
        handle: '.handle',
        stop: function(e, ui)
        {
          $.post(
            'sample.php',
            {
            'message1': 'hello',
            'message2': 'world',
            'top': ui.position.top,
            'left': ui.position.left
            },
            function(data){
            /* alert(data); */
            }
            );
        }
      });
    });
  </script>

簡単に解説しとくと「dragyouso」という移動できるもの（下記のようなもの）

<div id="drag_youso">
動かせるよっ！！
</div>

をdraggableで動かせるようにし、停止させたときに「sample.php」にpostで4つの値を投げています。
post内容は

メッセージ２つ
座標２つ

になります。

移動させて停止する旅にpostを投げる仕組みなので、移動後にいちいち座標を送るためのアクションがなくて非常に便利です。
現在つくっているiGoogleの代わりのものでもこの機能を盛り込んでいます。

ちなみにいま作っているiGoogleの代わりのものは欲しい機能はだいだい入れ込んだ状態で細かい部分を修正すればベータ版を公開出来ると思います。



デザインはBootswatchから引っ張ってきてますが、そのまま使うと結構ちゃんと表示できないものが多いので修正中です。
本物みたいにたくさんのデザインは用意できないですが、ある程度はいけるんじゃないかと思います。
新しい技術に触れつつこういったものを作るっていると、機能が１つ出来るたびにいまだにウキウキした感じになります。

---

JavaScript