Ajax – Drag & Drop

This is the feature that I woud like to implement into the subversion project. Thought I’d put out the code that makes this drag and drop feature. This is thanks to script.aculo.us. In order to make this work, you need to download the scrip.aculo.us code from: http://script.aculo.us/downloads. The following is the code that allows items to be dropped into a box.


<html>
<head>
<title>Test Drag & Drop</title>
<script src="javascript/prototype.js"
type="text/javascript"></script>
<script src="javascript/scriptaculous.js"
type="text/javascript"></script>
<script src="javascript/unittest.js"
type="text/javascript"></script>
</head>
<body>

<div id="cart" class="cart"
style="border: 1px solid black; width: 200px;">
- DROP HERE -
</div>

<script type="text/javascript">
Droppables.add('cart', {onDrop:function(element,dropon)
{document.formTest.Result.value += encodeURIComponent(element.id);}})
</script>

<br/>

<form name='formTest'>
<input type='text' name='Result' value='' />
</form>

<H1>Drag Me</h1>
<ul>
<li id="testID"
style="border: 1px solid black; width:40px;">TestID</li>
<li id="abc"
style="border: 1px solid black; width:20px;">ABC</li>
<li id="def"
style="border: 1px solid black; width:20px;">DEF</li>
</ul>

<script type="text/javascript">
new Draggable('testID', {revert:true})</script>
<script type="text/javascript">
new Draggable('abc', {revert:true})</script>
<script type="text/javascript">
new Draggable('def', {revert:true})</script>

</body>
</html>

Thusjanthan Kubendranathan

Leave a Reply