Jquery-UIのdraggableを使ってみた

これから仕事で使いそうなプラグインを使ってみた。

Ruby on Rails 3.2
Ruby 1.9.3
ほぼ見た目はbloggerのマネです。
Jquery UIを使用するときはapplication.jsに

//= require jquery-ui

を追加しあとは流れで
まずtop/index.html.erbに

<h1>Jqueryを遊ぶ</h1>
<table width="50%">
<tr>
 <td align="left" style="vertical-align: top;">
      <div class="a">ブログ全体</div>
    </td>
  </tr>
  <tr>
    <td align="left" style="vertical-align: top;">
      <table width="100%">
        <tr>
          <td align="left" style="vertical-align: top;">
            <div class="b">
              <div class="c" id="">
                <input type="text" tabindex="-1" style="opacity:0; height: 1px; width: 1px; z-index: -1; overflow-x: hidden; overflow-y: hidden; position: absolute;">
                <div class="d">
                  <div class="e"></div>
                  <span class="f"></span>
                  <div class="g">最大</div>
                  <div class="h">最小</div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

としてassets/stylesheets/top.css.scss

body {
  background-color:#ccc;
}
.a{
  color:#fff;
  font-size:13px;
  font-weight:bold;
  margin-left:5px;
}
.b{
  width:500px;
}
.c{
  height:20px;
  margin: 0 6px 10px;
}
.d{
  position:relative;
}
.e{
  width: 488px;
  background-color: #999;
  barder: none;
  height:9px;
  overflow:hidden;
  position: absolute;
  top:6px;
}
span.f{
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 1px;
  height:21px;
  width:11px;
  background:#fff;
}
.g {
  position:absolute;
  font-size:85%;
  top:24px;
}
.h{
  position: absolute;
  font-size:85%;
  top:24px;
  right:0;
}

最後にassets/javascripts/change.jsを作成し

jQuery (function() {
  jQuery('span.f').draggable({
    containment: 'div.d' ,
    scroll: false,
     axis: "x"
  });
});

遊んでみました。