ポストイットっぽいCSS

CSS 
li.item{
list-style-type:none;
cursor:move; 
width:200px;
line-height:14px;
margin-top:5px;

padding-bottom:10px;
padding-top:   10px;
padding-right: 10px;
padding-left:  10px;

border-top:1px solid rgb(255,204,102);
border-bottom:0px solid rgb(255,204,102);
border-right:0px solid rgb(255,204,102);
border-left:20px solid rgb(255,204,102);
}
li.item ul{
font-size:10px;
text-align:right;

}
li.item ul li{
display:inline;
margin-left:3px;
font-color:black;
}
body {
background-color:white;
background-image:url(../images/back.png);
background-attachment: fixed;
color:white;

}

script.aculo.us でドラッグ&ドロップ on Rails

Ruby on Rails script.cualo.us

さてさて夏休みのお勉強ひきつづき。
formで入力したものを、ajaxでdbにおくりつつ、
viewに表示するところまでできたので、
今度は表示を単なるlistとしてではなくて、
ドラッガブルなlistにしちゃおうと思う。

きっとそれってscript.aculo.usでできちゃうんだよね!
と、いうことで、
今日はscript.aculo.usのお勉強。

まずヘッダー

layoutのheadに以下を追加。
# prototype.js、effect.js、dragdrop.js、control.jsを読み込むよ。

<%= javascript_include_tag :defaults %>

そしたら、

<ul id="items">
<% @items.each do |i|-%>
<% if i.content -%>
  <li id="item<%= i.id %>"><%= i.content %></li>
  <%= draggable_element "item"+i.id.to_s %>
<% end -%>
<% end -%>
</ul>

で、できちゃう。簡単。

ドラッグ&ドロップできたら、場所を覚えておきたい!

よね、やっぱり。
と、調べている途中で他のことが気になり出したので、一次休止