Valid XHTML 1.0! Valid CSS!

Draggable.js Hatena bookmark

概要

HTMLの任意のElementをDrag & DropできるようにするためのJavaScriptライブラリです。Drag & Drop以外の機能はありませんが、その分ロジックが簡潔なので、様々な用途にソースコードを改良しやすいと思います。 また、インスタンスを生成するだけでDrag & Dropできるようになるので、お手軽です。

ダウンロード

以下のリンクからダウンロードしてください。

チュートリアル

Draggable.jsをロードします。

<script type="text/javascript" src="./Draggable.js"></script>

動かしたいElementのスタイルをposition:absoluteに設定します。

<div id="tutorial" style="position:absolute;">Tutorial</div>

引数にElementのIDを渡してDraggableオブジェクトをnewします。

<script type="text/javascript">
new Draggable("tutorial");
</script>

これでDrag & Dropができるようになります。ElementにIDは必須ではありませんので、直接Elementを渡すこともできます。

<img src="./" width="100" height="100" style="position:absolute">
<img src="./" width="100" height="100" style="position:absolute">
<img src="./" width="100" height="100" style="position:absolute">
<script type="text/javascript">
var img = document.getElementsByTagName("img");
for (var i = 0; i < img.length; i++) {
  new Draggable(img[i]);
}
</script>

登録されたイベントリスナーを削除したい場合はインスタンスのdestoryメソッドを呼び出します。

var tutorial = new Draggable("tutorial");
tutorial.destroy();

サンプル

サンプルコードです。サンプルコードをブラウザで閲覧すると、下のような移動できるElementが表示されます。試しに、Sampleを動かしてみてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="./Draggable.js"></script>
<style type="text/css">
.sample {
  position: absolute;
  width: 150px;
  height: 100px;
  cursor: move;
}
#sample1 {
  top: 0px;
  left: 500px;
  background-color: #AEEE8E;
}
#sample2 {
  top: 40px;
  left: 540px;
  background-color: #8ECAEE;
}
#sample3 {
  top: 80px;
  left: 580px;
  background-color: #EE8E97;
}
</style>
</head>
<body>
<div id="sample1" class="sample">Sample 1</div>
<div id="sample2" class="sample">Sample 2</div>
<div id="sample3" class="sample">Sample 3</div>
<script type="text/javascript">
var sample1 = new Draggable("sample1");
var sample2 = new Draggable("sample2");
var sample3 = new Draggable("sample3");
</script>
</body>
</html>
Sample 1
Sample 2
Sample 3

動作環境

IE6SP2、IE7、Firefox2.0, 3.0, 3.5, 3.6、Opera9.23, 9.50(Win)、Safari2, 3, 4で動作確認をしています。

ライセンス

BSDライセンスとします。ソフトウェアの使用(実行)は制限なく自由ですが、再配布の際には、ソースコードであれバイナリであれ、 「著作権表示」「条件のリスト」「免責事項」を含める必要があります。

更新履歴