jQueryでドラッグを制御する例文
フレーム内でのドラッグ
必要なUIファイル
・Core
・Widget
・Mouse
・Draggable
・Droppable
【例】フレーム内で縦方向のみにドラッグ可
<style type="text/css"><!--
/* フレーム（枠） */
#Frame {
position:relative;
width:100px;
height:100px;
border:1px solid #CCC;
overflow:hidden;
}
/* 動かせる範囲 */
#Parent {
position:absolute;
top:-100px; /* フレームとドラッガブル領域の差分 */
width:100px; /* ドラッガブルエリア ＋ フレームとドラッガブル領域の差分 */
height:300px;
}
/* ドラッガブル領域 */
#Draggable {
position:absolute;
top:100px;
width:100px;
height:200px;
background-color:#CCC;
}
--></style>
<script type="text/javascript"><!--
$(function(){
$("#Draggable").draggable({axis:"y",containment:"#Parent"});
//マウスカーソル設定
$("#Draggable").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); });
});
// --></script>
<body>
<div id="Frame">
<div id="Parent">
<div id="Draggable">
</div>
</div>
</div>
</body>
