Very basic JavaScript drag and drop example
This example lets you drag one of the files into the directory and then removes that file from the screen. The idea is that some Ajax will take the source and destination locations in the get file function and process some stuff on the server. Maybe for a file manager application ... etc. It's very primitive, but it works.
<html>
<head>
<title>Mouse</title>
<style type="text/css">
body {
font-family:sans-serif;
}
div.block1 {
margin:8px;
padding:8px;
border:1px solid black;
}
div.block2 {
margin:8px;
padding:8px;
border:1px solid black;
}
div.block1, div.block2 {
width:200px;
height:25px;
}
div#output {
margin:8px;
padding:8px;
border:1px solid black;
width:500px;
height:25px;
}
</style>
<script type="text/javascript">
function set_file(source,id)
{
drag_source = source;
parent_id = id;
return 1;
}
function get_file(destination)
{
drag_destination = destination;
if(drag_source && parent_id && drag_source != drag_destination)
{
document.getElementById('output').innerHTML = "mv " + drag_source + " " + drag_destination + " " + parent_id;
document.getElementById('container').removeChild(document.getElementById(parent_id));
parent_id = null;
drag_source = null;
}
return 1;
}
</script>
<body>
<div id="container">
<!-- note, for directories, you put onmousedown and onmouseup
also, i link this to some php code where it checks to see if the
destination directory is in fact a directory and that the file being
moved there doesn't already exist.
-->
<div id="dir1" onmousedown="set_file('/var/destination/www',this.parentNode.id)" onmouseup="get_file('/var/destination/www')" class="block1">
<a href="#">block1 dir</a>
</div>
<div id="file1" class="block2 dragfile">
<a onmousedown="set_file('/var/source1/www',this.parentNode.id)" href="#">block2 file 1</a>
</div>
<div id="file2" class="block2 dragfile">
<a onmousedown="set_file('/var/source2/www',this.parentNode.id)" href="#">block2 file 2</a>
</div>
<div id="output"></div>
</div>
</body>
</html>
[Click to add or edit comments])
Please prepend comments below including a date