ドラッグ可能なエレメントを指定する

書式

dragObj = new Draggable(element, option)

dragObj : ドラッグオブジェクト
element : ページ上のエレメント
option : 以下のオプションを指定可能【省略可能】
　handle : ハンドル（エレメント名を指定）
　revert : ドラッグ終了後に元の位置に戻す（true : 戻す、false : 戻さない）
　snap : スナップ処理
　zIndex : Z座標（初期値は10000）
　constraint : 移動方向制限（horizontal : 水平のみ、vertical : 垂直のみ）
　ghosting : ドラッグ前のエレメントを表示したままにするかどうか（true : する、false : しない）
　starteffect : ドラッグ開始時のエフェクト
　reverteffect : 復帰時のエフェクト
　endeffect : ドラッグ終了時のエフェクト

説明

　ドラッグ可能なエレメントを指定するにはnew Draggable()を使います。最初のパラメータにドラッグしたいエレメントを指定します。2番目のオプションで、ドラッグ処理の細かい指定を行います。handleを指定すると指定されたエレメントをドラッグすることでnew Draggable()で生成したエレメントがドラッグできるようになります。snapはドラッグ時に呼び出される関数を指定します。関数にはX,Y座標がパラメータとして渡されます。関数からの戻り値はreturn [x, y]のようにX,Y座標を返す必要があります。 　また、ドラッグ中にESCキーが押されると、ドラッグ処理が中止されます。

Ajaxライブラリ リファレンス

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function(){
new Draggable("box1");
new Draggable("box2", { snap:function(x,y){
return [Math.floor(x / 50)*50, Math.floor(y / 50)*50]; }});
new Draggable("box3", { revert:true } );
}
// --></script>
</head>
<body>
<h1>DragDropサンプル</h1>
<div id="box1">box1:ここは普通にドラッグ<br>できるボックスです</div>
<div id="box2">box2:ここはスナップ<br>するボックスです</div>
<div id="box3">box3:ここはドラッグ後に<br>元の位置に戻るボックスです</div>
</body>
</html>