皆さん、こんにちは。加藤です。
相棒が終わってしまい、水曜日に物足りなさを感じております。
今夜は、DSの相棒でこの寂しさを紛らわしたいと思います。
さて、本日のお題は「jQuery＋draggable＋cookie」です。
急に思い立って実験してみました。
どんなものかというと、口では説明しづらいので図で説明をば！
こんなカンジで、対象物を移動させ、リロードしても位置を記憶するというものを作ってみました。
実装方法は以下。
まず、jQuery UIのサイトからUIをダウンロードしてください。
また、クッキーを簡単に制御できるjquery.cookieもご用意ください。
ダウンロードしたものから使うものは、
- jquery-1.3.2.min.js（jquery本体）
- jquery-ui-1.7.1.custom.min.js（UI本体）
- ui.draggable.js
- jquery.cookie.js
です。
ソースは以下のようにまず、head内でjsを読み込みます
<script type=”text/javascript” src=”../js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”../js/jquery-ui-1.7.1.custom.min.js”></script>
<script type=”text/javascript” src=”../js/ui.draggable.js”></script>
<script type=”text/javascript” src=”../js/jquery.cookie.js”></script>
ドラッグ対象のhtmlは、
<div id=”myDrag”>ドラッグできます</div>
とします。
cssは、
<style type=”text/css”>
#maincol{
position:relative;
height:1000px;//高さ確保
}
#myDrag {
position:absolute;
top:0px;
left:0px;
width : 100px ;
height : 100px ;
padding : 10px ;
background-color : #B9FF04 ;
}
</style>
こんなカンジで。。
で、肝心のスクリプトは
<script type=”text/javascript”>
$(function() {
$(‘#myDrag’).draggable({
opacity : 0.5, //ドラッグ時の不透明度
cursor : ‘move’, //カーソル形状
containment: ‘#maincol’,//移動範囲制限
stop: function(e, ui) {
$.cookie(‘tname’,ui.position.top,{expires:30});//topの数値をクッキーに保存
$.cookie(‘lname’,ui.position.left,{expires:30});//leftの数値をクッキーに保存
}
})
});
if($.cookie(“tname”)) {
$(function(){
$(“#myDrag”).css(“top”,$.cookie(“tname”) + “px”);//保存したクッキーの値を挿入
$(“#myDrag”).css(“left”,$.cookie(“lname”) + “px”);//保存したクッキーの値を挿入
});
}
</script>
こんな感じです。
+”px”がないとfirefoxで動きませんでした。無くてもIEでは動きます。私はネジがゆるいのでpxを付けずに何度もリロードしてました。
動作確認は、IE7とfirefox3とwin版safari4betaです。IE6などは未確認です。
また、このソースはあくまで実験物です。万が一実際に使用する場合は、ご自分でしっかりと検証してください。
実際のプロジェクトでは、なかなかこういったものは使わないので、新鮮で楽しかったです。
