指定した要素をドラッグして移動「tinyDraggable」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した要素をドラッグして移動できるようにするプラグイン「tinyDraggable」を紹介します。
jQueryプラグイン「tinyDraggable」
このプラグインを使えば、指定した要素をマウスを使ってドラッグし、お好きな位置まで移動することができます。
要素を指定するだけなので、テーブルなんかもドラッグすることができます。
スポンサーリンク
それではデモページの要素をドラッグしてみてください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="tinyDraggable のデモでーす。">
<title>tinyDraggable - jQueryプラグイン</title>
<style>
#demo1 {
border: blue solid 1px;
width: 300px;
height: 250px;
}
</style>
</head>
<body>
<h1>tinyDraggable のデモでーす。</h1>
<p>
<div id="demo1">ドラッグしてみてください。</div>
<table id="demo2" border="1">
<tr><td>テーブル</td><td>もドラッグ</td></tr>
<tr><td>できるよ</td><td>。</td></tr>
</table>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.tiny-draggable.js"></script>
<script>
$('#demo1').tinyDraggable();
$('#demo2').tinyDraggable();
</script>
</body>
</html>
スポンサーリンク