マウス操作でHTML要素をドラッグアンドドロップ「Field Chooser」
当ページのリンクには広告が含まれています。
スポンサーリンク
マウス操作でHTML要素をドラッグアンドドロップできるフィールドリストを実装するプラグイン「Field Chooser」を紹介します。
jQueryプラグイン「Field Chooser」
このプラグインを使えば、指定したHTML要素をリストを枠から別の枠へドラッグアンドドロップで移動することができます。「Ctrl（MacはCommand）」キーを押しながらクリックすると複数の要素を選択することができます。
要素のドラッグアンドドロップを何かのトリガーに使う場合などに便利ですね。クイズとかかな？
スポンサーリンク
デモで左の枠から右の枠へフィールドをドラッグアンドドロップしてみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Field Chooserのデモでーす。">
<title>Field Chooser - jQueryプラグイン</title>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/fieldChooser.js"></script>
<script>
$(document).ready(function () {
var $chooser = $("#fieldChooser").fieldChooser();
var $sourceFields = $("#sourceFields").children();
$chooser.getSourceList().add($sourceFields);
});
</script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
</head>
<body>
<h1>Field Chooserのデモでーす。</h1>
<p>左の枠 から 右の枠 へドラッグアンドドロップしてみてください。</p>
<div id="sourceFields">
<div>ドロップ</div>
<div>してみてね。</div>
<div>ドラッグ</div>
<div>アンド</div>
</div>
<div id="fieldChooser" tabIndex="1"></div>
</body>
</html>
スポンサーリンク