jQuery APIリファレンスjQuery UI：相互作用
- Draggable〔マウスでドラッグ可能な要素を作成〕
- Droppable〔ドロップ可能な要素を作成〕
- Sortable〔マウスでソート可能な要素リストを作成〕
- Selectable〔マウスとキーボードで選択可能な要素リストを作成〕
- Resizable〔リサイズ可能な要素を作成〕
Draggable
マウスでドラッグ可能な要素を作成
2009/2/27
プラグインメソッド
draggable(options) 戻り値：jQuery
マウスでドラッグ可能な要素を作成します。 すべてのコールバック（start、stop、drag）は2つの引数（ブラウザ独自のイベントと準備したUIオブジェクト）を受け取ります。
-
第1引数optionsには、ドラッグ可能な要素を構成するキーと値のペアのセットを指定します。 すべてのoptionsは任意指定です。
draggable("destroy") 戻り値：jQuery
ドラッグ機能を完全に削除します。
draggable("disabled") 戻り値：jQuery
ドラッグ機能を一時的に無効にします。
ドラッグ機能を再度有効にするには、$(..).draggable("enable")を使用します。
draggable("enable") 戻り値：jQuery
無効にされたドラッグ機能を再び有効にします。
<!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="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery UI：相互作用：Draggableの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.draggable.js"></script>
<script type="text/javascript">
$(function(){
$(".block").draggable();
});
</script>
<style type="text/css">
.block { border:2px solid #0090df; background-color:#68bfef; width:150px; height:70px; margin:10px; }
</style>
</head>
<body>
<div id="wrap">
<h1>jQuery UI：相互作用：Draggableの使用例 | jQuery</h1>
<!-- CODE -->
<p>▼マウスでドラッグ可能なdiv要素を作成します。</p>
<div class="block"></div>
<!-- CODE / -->
</div>
</body>
</html>
Droppable
ドロップ可能な要素を作成
2009/2/27
プラグインメソッド
droppable(options) 戻り値：jQuery
マウスでドラッグした要素をドロップすることができるドロップ可能な要素を作成します。
すべてのコールバック（start、stop、drag）は2つの引数（ブラウザ独自のイベントと準備したUIオブジェクト）を受け取ります。
-
第1引数optionsには、ドラッグ可能な要素を構成するキーと値のペアのセットを指定します。 すべてのoptionsは任意指定です。
droppable("destroy") 戻り値：jQuery
ドロップ機能を完全に削除します。
droppable("disabled") 戻り値：jQuery
ドロップ機能を一時的に無効にします。
ドロップ機能を再度有効にするには、$(..).droppable("enable")を使用します。
droppable("enable") 戻り値：jQuery
無効にされたドロップ機能を再び有効にします。
<!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="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery UI：相互作用：Droppableの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.draggable.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.droppable.js"></script>
<script type="text/javascript">
$(function(){
$(".block").draggable({helper: 'clone'});
$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(this).append("<br>Dropped!");
}
});
});
</script>
<style type="text/css">
.sample { position:relative; width:500px; height:70px; }
.block { position:absolute; top:5px; left:5px; border:2px solid #0090df; background-color:#68bfef; width:75px; height:75px; margin:10px; z-index:100; }
.drop { background-color:#e9b96e; border:3px double #c17d11; width:150px; height:70px; margin:10px; position:absolute; top:5px; right:5px; opacity:0.7; overflow:auto; }
.droppable-active { opacity:1.0; }
.droppable-hover { outline:1px dotted black; }
</style>
</head>
<body>
<div id="wrap">
<h1>jQuery UI：相互作用：Droppableの使用例 | jQuery</h1>
<!-- CODE -->
<p>▼マウスでドラッグ＆ドロップ可能なdiv要素を作成します。</p>
<div class="sample">
<div class="block">マウスでドラッグしてください。</div>
<div class="drop">ここに青い四角をドロップしてください。</div>
</div>
<!-- CODE / -->
</div>
</body>
</html>
Sortable
マウスでソート可能な要素リストを作成
2009/2/27
sortable(options)
マウスで並べ替え可能な要素を作成します。
すべてのコールバックは2つの引数（ブラウザ独自のイベントと準備したUIオブジェクト）を受け取ります。
-
第1引数optionsには、並べ替え可能な要素を構成するキーと値のペアのセットを指定します。 すべてのoptionsは任意指定です。
sortable("disable") 戻り値：jQuery
並べ替え機能を一時的に有効にします。
ドロップ機能を再度有効にするには、$(..).sortable("enable")を使用します。
sortable("enable") 戻り値：jQuery
無効にされた並べ替え機能を再び有効にします。
sortable("destroy") 戻り値：jQuery
並べ替え機能を完全に削除します。
sortable("serialize", options) 戻り値：文字列
並べ替え可能な要素のIDを順番に並べ、フォームで送信可能な文字列にして返します。
このメソッドを呼ぶと、簡単にサーバーに新しい要素を送信するためのURLに追加可能なハッシュを生成します。
「setname_number」形式で、各要素のIDを調べ、「setname[]=number&setname[]=number」のようなハッシュを生成します。
どのように関数が動作するか定義するのに、第二引数としてオプションのハッシュを渡すことができます。 可能なオプションは、「key」、「attribute」、「expression」です。
serializeが空文字列を返す場合、id属性がアンダースコアを含んでいるか確認してください。 フォームの中に「set_number」がある可能性があります。 例えば、id属性がfoo_1、foo_2、foo_3の3つのリスト要素は、foo[]=1&foo[]=5&foo[]=2にシリアライズされます。 アンダースコア、セットと数を分離する等号かハイフンを使用できます。 例えば、foo=1またはfoo-1は、すべてfoo[]=1にシリアライズされます。
-
第2引数optionsには、どのように知り合図するか定義したキーと値のハッシュを指定します。
sortable("toArray") 戻り値：文字列[]
並べ替え可能な要素のID名を順番に並べ、文字列の配列にして返します。
<ui id="asortable">
<li id="hello">Hello</li>
<li id="goodbye">Good bye</li>
</ul>
の場合は、
var result=$('#a_sortable').sortable('toArray');
となり、
result[0]は"hello"、result[1]は"goodbye"になります。
sortable("refresh") 戻り値：jQuery
並べ替え可能な要素ををリフレッシュします。 すべての並び替え可能な要素のリロード、新しい要素の認識をカスタムで実行します。
sortable("refreshPositions") 戻り値：jQuery
並び替え可能な要素のキャッシュされた要素をすべてリフレッシュします。 通常、スクリプトをゆっくりおちるパフォーマンスで自動的に行われます。
<!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="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery UI：相互作用：Sortableの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.sortable.js"></script>
<script type="text/javascript">
$(function(){
$("#myList").sortable({});
});
</script>
<style type="text/css">
ul { list-style: none; margin:0; padding:0; }
li { background:#727ea3; color:#fff; width:100px; margin:5px; padding:3px; list-style:none; }
</style>
</head>
<body>
<div id="wrap">
<h1>jQuery UI：相互作用：Sortableの使用例 | jQuery</h1>
<!-- CODE -->
<p>▼ソート可能なリスト要素を作成します。</p>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<!-- CODE / -->
</div>
</body>
</html>
Selectable
マウスとキーボードで選択可能な要素リストを作成
2009/2/27
selectable(options)
マウスで選択可能な要素を作成します。 要素の周りのボックスをドラッグして選択したり、[Shift]キーと[Ctrl]キーを押しながらでマウスで要素をクリックして複数選択できる選択することができます。
-
第1引数optionsには、並べ替え可能な要素を構成するキーと値のペアのセットを指定します。 すべてのoptionsは任意指定です。
selectable("disabled")
選択機能を一時的に無効にします。 選択機能を再度有効にするには、$(..).selectable("enable")を使用します。
selectable("enable")
無効にした選択機能を再び有効にします。
selectable("reflesh")
選択した各要素の位置とサイズをリフレッシュします。 このメソッドは、選択した各要素のいちとサイズを手動で再計算するために使用します。 autoRefreshにFALSEが指定されている時に役立ちます。
selectable("toggle")
現在の状態を基準に、選択の有効・無効状態を交互に切り替えます。
selectable("destroy")
選択機能を完全に削除します。
<!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="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery UI：相互作用：Selectableの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.selectable.js"></script>
<script type="text/javascript">
$(function(){
$("#myList").selectable();
});
</script>
<style type="text/css">
ul { list-style:none; margin:0; padding:0; }
.ui-selected { background:#727ea3; color:#fff; }
.ui-selecting { border:1px solid #727ea3; padding:2px; }
li { background:#cfd4e6; width:100px; margin:5px; padding:3px; list-style:none; }
</style>
</head>
<body>
<div id="wrap">
<h1>jQuery UI：相互作用：Selectableの使用例 | jQuery</h1>
<!-- CODE -->
<p>▼選択可能なリスト要素を作成します。</p>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<!-- CODE / -->
</div>
</body>
</html>
Resizable
リサイズ可能な要素を作成
2009/2/27
resizable(options)
リサイズ可能な要素を作成します。 リサイズハンドルをドラッグすることで、要素をリサイズすることができます。 最大・最小の幅および高さと同様に、1つまたは複数のリサイズハンドルを指定することができます。
すべてのコールバック（start、stop、resize）は2つの引数（ブラウザ独自のイベントと準備したUIオブジェクト）を受け取ります。
-
第1引数optionsには、リサイズ可能な要素を構成するキーと値のペアのセットを指定します。 すべてのoptionsは任意指定ですが、少なくとも1つのハンドルがないとリサイズすることができないので意味がありません、
resizable("disable") 戻り値：jQuery
リサイズ機能を一時的に無効にします。
リサイズ機能を再度有効にするには、$(..).resizable("enable")を使用します。
resizable("enable") 戻り値：jQuery
無効にされたリサイズ機能を再び有効にします。
resizable("destory") 戻り値：jQuery
リサイズ機能を完全に削除します。
<!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="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery UI：相互作用：Resizableの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function(){
$("#example").resizable();
});
</script>
<style type="text/css">
#example { width:150px; height:100px; background:silver; overflow:hidden; }
</style>
</head>
<body>
<div id="wrap">
<h1>jQuery UI：相互作用：Resizableの使用例 | jQuery</h1>
<!-- CODE -->
<p>▼マウスでリサウズ可能なdiv要素を作成します。</p>
<div id='example' class="ui-wrapper example">
<div style="position:absolute; top:20px; left:20px; bottom:20px; right:20px;">リサイズしてください</div>
</div>
<!-- CODE / -->
</div>
</body>
</html>