Posts tagged scriptaculous

scriptaculous.js を使ってマトリックス状に配置した要素を並び替える

1
6056日
by in Ajax, JavaScript

scriptaculous.js を使って並び替えを行う を応用して格子状に並んだ要素を並び替える例です。基本的な部分はリスト形式の並び替えと同じですので省略します。
最初にデモ、その後にコードを紹介します。

デモ


#sortarea { width: 350px; } #sortarea div { float: left; width: 100px; height: 70px; border: 1px solid #000; margin: 5px; text-align: center; padding-top: 30px; cursor: default; }

A1
A2
A3
A4
A5
A6
A7
A8
A9

ソートする要素

前回は li タグで要素を定義しましたが、今回は div タグで定義しました。
CSS で格子状に並ぶようにしています。

<style>
#sortarea {
width: 350px;
}

#sortarea div {
float: left;
width: 100px;
height: 70px;
border: 1px solid #000;
margin: 5px;
text-align: center;
padding-top: 30px;
cursor: default;
}
</style>

<div id="sortarea">
<div id="drag_1">A1</div>
<div id="drag_2">A2</div>
<div id="drag_3">A3</div>
<div id="drag_4">A4</div>
<div id="drag_5">A5</div>
<div id="drag_6">A6</div>
<div id="drag_7">A7</div>
<div id="drag_8">A8</div>
<div id="drag_9">A9</div>
</div>

ソートする JavaScript コード

Sortable.create の option に overlap:’horizontal’ を指定しなくても並び替えはできますが、少しぎこちない感じになりますので、指定しておいたほうがいいでしょう。

<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("sortarea",{
    tag:'div',overlap:'horizontal',constraint: false,
});
// ]]>
</script>

scriptaculous.js を使って並び替えを行う

2
6056日
by in Ajax, JavaScript

JavaScript の読み込み

まず prototype.js と scriptaculous.js を読み込む

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>

ソートするリストを作成する

ここでのポイントはドラッグさせたい要素に drag_1 のように「共通の名前+アンダバー+数字」を付けることです。

<ul id="sortarea">
<li id="drag_1">A1</li>
<li id="drag_2">A2</li>
<li id="drag_3">A3</li>
<li id="drag_4">A4</li>
<li id="drag_5">A5</li>
<li id="drag_6">A6</li>
<li id="drag_7">A7</li>
<li id="drag_8">A8</li>
<li id="drag_9">A9</li>
</ul>

ソートする JavaScript コード

ソートするエリアとソートする要素を定義した後で実際にソートするための JavaScript コードを書く。このコードがソートさせたい要素よりも前に書くとエラーになるので注意。

<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("sortarea",{
    onUpdate:function(){
        new Ajax.Updater(
        'sortarea',
        '/path/to/phpcode',
            {
                asynchronous:true,
                evalScripts:true,
                parameters:Sortable.serialize("sortarea")
            }
        );
    }
});
// ]]>
</script>

onUpdate でソート結果をPHP に送りデータベースなりに反映させる。
データベースに反映などが必要なければ、onUpdate は不要です。

デモ

これを実際に使用した例が下記になります。

#sortarea { width: 350px; border: 1px solid #000; } #sortarea li { cursor: default; }

  • LIST1
  • LIST2
  • LIST3
  • LIST4
  • LIST5
  • LIST6
  • LIST7
  • LIST8
  • LIST9

Go to Top