Valid XHTML 1.0! Valid CSS!

Draggable.js Hatena bookmark livedoor clip

Summary

Draggable.js provides you with Drag-and-Drop. Draggable.js is builded by simple codes, because it has a function of Drag-and-Drop only.
This library is free software.

Download

Please download from the following link.

Tutorial

Load the script.

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

Add a style (position:absolute) to an element you would like to move.

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

Create an instance with an argument that is an element-id or an element-object.

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

You can start right now. Image(img-tag) elements will be move at the following example.

<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>

You may remove an event listener, then call the destroy method.

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

Sample

Please move following elements by all means. This is a simple sample.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<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

Compatibility

The latest version of Draggable.js is compatible with the following browsers:
IE6SP2(Win), IE7(Win), Firefox2.0/3.0(Win), Firefox2.0/3.0(Mac), Opera9.23/9.50(Win), Safari3.0.4(Win), Safari2.0.4/3.1(Mac).

License

The BSD License.

Changelog