※ ChatGPTを利用し、要約された質問です（原文：iGoogle風サイトの作り方）
iGoogle風サイトの作り方
2008/05/27 01:16
このQ&Aのポイント
初心者、JS学習中の方にiGoogle風のサイト作り方を解説します！HTML内のdiv要素をドラッグアンドドロップで移動し、座標をCookieに保存して読み込む方法を紹介します。
iGoogleのようなサイトを作りたい初心者の方へ！HTML内の要素をドラッグアンドドロップで移動させる方法と、その座標をCookieに保存して読み込む方法を解説します。
初心者の方にiGoogle風のサイト作り方を解説します！HTML内の要素をドラッグアンドドロップで移動させる方法と、座標をCookieに保存して読み込む方法を紹介します。
初心者、JS学習中です。
iGoogleのように、HTML内のdiv要素をドラッグアンドドロップで移動し、座標をCookieに記憶して、またそのサイトを訪問したとき読み込めるようにしたいのですが、なかなかうまくいきません。
要素を移動させるJSの紹介をしているサイトはたくさんあり、私も移動はできたのですが、その座標を記憶し読み込みできるように紹介している文章がなくて困っています。
利用しているライブラリは
prototype.js
scriptaculous.js
で、
http://script.aculo.us/
からとって来ています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml " xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="js/lib/prototype.js"></script>
<script type="text/javascript" src="js/src/scriptaculous.js"></script>
<script type="text/javascript">
window.onload = function(){
set_draggable('testbox1');
set_draggable('testbox2');
set_cookie('testbox1');
set_cookie('testbox2');
}
//以上をhead部分に書き、以下をbody部に書きました。
</script>
</head>
<body>
<div id="testbox1" class="box1" style="z-index:10;width:150px;height:150px;background:#bbf;">
<span id="handle1">drag here</span><br/>
<input type="checkbox" id="shouldrevert1"/> Revert?
</div>
<div id="testbox2" class="box1" style="z-index:100;width:150px;height:150px;background:#bbf;">
<span id="handle2">drag here</span><br/>
<input type="checkbox" id="shouldrevert2"/> Revert?
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
function set_cookie(cookie_name,cookie_value){
var cookie_data = cookie_name+"="+escape(cookie_value)+";";
cookie_data+="expires=Fri,1-Jan-2038 00:00:00;";
document.cookie = cookie_data;
}
function set_draggable(box_id){
new Draggable(box_id,{endeffect:function(){
var pos_top = $(box_id).style.top;
var pos_left = $(box_id).style.left;
set_cookie(box_id,pos_top+"-"+pos_left);
}});
var cookies = document.cookie.split(";");
for(var i=0;i<cookies.length;i++){
var cookie_name = cookies[i].split('=')[0];
if (cookie_name == box_id){
var cookie_value = cookies[i].split('=')[1];
$(box_id).style.top = cookie_value.split('-')[0];
$(box_id).style.left = cookie_value.split('-')[1];
}
}
}
</script>
</body>
</html>
現在の問題として、以上のスクリプトでそれぞれにcookieを作成して保存されたのは確認できたのですが、ページを更新するとcookieをひとつしか読み込んでくれません。
クッキーの読み込みのスクリプトが間違っているのでしょうか？
最終的に１０の要素の座標を記憶・読み込みたいので、複数のcookieを扱うことができるようにするためにはどのようにすればいいか教えていただきたいと思います。
もう2週間もこの問題を考えているのですが、いまだに解けません。
できればソースも載せていただけると助かります。
どうか、よろしくお願いします。
質問の原文を閉じる
質問の原文を表示する
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
できました！すごいです！ネ申！！笑。 本当に感謝しています。 スペースがつくんですね、知りませんでした。 ありがとうございました！
補足
はい、確かにset_cookieはいらないですね f(^_^;) 試しにいろいろやってみた残りがあったみたいです。