| 1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
|---|
| 2 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
|---|
| 3 |
<head> |
|---|
| 4 |
<title>script.aculo.us Drag and drop functional test file</title> |
|---|
| 5 |
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
|---|
| 6 |
<script src="../../lib/prototype.js" type="text/javascript"></script> |
|---|
| 7 |
<script src="../../src/scriptaculous.js" type="text/javascript"></script> |
|---|
| 8 |
<script src="../../src/unittest.js" type="text/javascript"></script> |
|---|
| 9 |
<style type="text/css" media="screen"> |
|---|
| 10 |
#dragger { |
|---|
| 11 |
background-color: blue; |
|---|
| 12 |
} |
|---|
| 13 |
|
|---|
| 14 |
#dropper { |
|---|
| 15 |
background-color: green; |
|---|
| 16 |
} |
|---|
| 17 |
|
|---|
| 18 |
</style> |
|---|
| 19 |
</head> |
|---|
| 20 |
<body> |
|---|
| 21 |
<h1>script.aculo.us Drag and drop functional test file</h1> |
|---|
| 22 |
|
|---|
| 23 |
<h2>Draggables/Droppables</h2> |
|---|
| 24 |
|
|---|
| 25 |
<div id="draggercontainer"> |
|---|
| 26 |
<div id="dragger"> |
|---|
| 27 |
To be dragged. |
|---|
| 28 |
</div> |
|---|
| 29 |
<script type="text/javascript" language="javascript" charset="utf-8"> |
|---|
| 30 |
|
|---|
| 31 |
new Draggable('dragger',{revert:true}); |
|---|
| 32 |
|
|---|
| 33 |
</script> |
|---|
| 34 |
</div> |
|---|
| 35 |
|
|---|
| 36 |
<div id="otherdraggercontainer"> |
|---|
| 37 |
<div id="otherdragger"> |
|---|
| 38 |
Don't drag this |
|---|
| 39 |
</div> |
|---|
| 40 |
<script type="text/javascript" language="javascript" charset="utf-8"> |
|---|
| 41 |
|
|---|
| 42 |
new Draggable('otherdragger',{revert:true}); |
|---|
| 43 |
|
|---|
| 44 |
</script> |
|---|
| 45 |
</div> |
|---|
| 46 |
|
|---|
| 47 |
<br> |
|---|
| 48 |
|
|---|
| 49 |
<div id="dropper"> |
|---|
| 50 |
To be dropped on. |
|---|
| 51 |
</div> |
|---|
| 52 |
|
|---|
| 53 |
|
|---|
| 54 |
<script type="text/javascript" language="javascript" charset="utf-8"> |
|---|
| 55 |
|
|---|
| 56 |
function newDragger() { |
|---|
| 57 |
Element.update('draggercontainer', $('otherdraggercontainer').innerHTML); |
|---|
| 58 |
} |
|---|
| 59 |
|
|---|
| 60 |
Droppables.add('dropper',{onDrop:newDragger}); |
|---|
| 61 |
|
|---|
| 62 |
</script> |
|---|
| 63 |
|
|---|
| 64 |
|
|---|
| 65 |
</body> |
|---|
| 66 |
</html> |
|---|