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.
Please download from the following link.
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();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>
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).
The BSD License.