root/public/javascripts/scriptaculous/test/functional/dragdrop2_test.html @ 5

Revision 1, 3.1 kB (checked in by falcon, 17 years ago)

Version one -> initial work from the laptop.
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4<head>
5  <title>script.aculo.us Drag and drop functional test file</title>
6  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
7  <script src="../../lib/prototype.js" type="text/javascript"></script>
8  <script src="../../src/scriptaculous.js" type="text/javascript"></script>
9  <script src="../../src/unittest.js" type="text/javascript"></script>
10  <style type="text/css" media="screen">
11    #thelist li { background: green; margin:5px; padding: 30px; }
12    #thelist2 li { background: #ffb; margin:2px; padding: 2px; }
13  </style>
14</head>
15<body>
16<h1>script.aculo.us Drag and drop functional test file</h1>
17
18<h2>Draggables/Droppables</h2>
19
20<div id="revertbox1" class="box1" style="z-index:1000;width:150px;height:150px;background:#bbf;">
21  <span id="handle1">drag here</span><br/>
22  <input type="checkbox" id="shouldrevert1"/> Revert?
23</div>
24
25<div id="revertbox2" class="box" style="z-index:1000;width:150px;height:150px;background:#bbf;">
26  <span id="handle2">drag here</span><br/>
27  <input type="checkbox" id="shouldrevert2"/> Revert?
28  I've onStart, onDrag and onEnd events!<br/>
29  <span id="event-info"></span>
30</div>
31
32<div id="specialbox" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
33  This box overrides the default endeffect
34</div>
35
36<div id="specialbox2" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
37  This box overrides the default starteffect
38</div>
39
40<div id="specialbox3" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
41  This box overrides the default end- and starteffects
42</div>
43
44<div id="droptarget1" style="width:200px;height:200px;background-color:#eee;">accepts first box</div>
45<div id="droptarget2" style="width:200px;height:200px;background-color:#eee;">accepts second box</div>
46
47<script type="text/javascript" language="javascript" charset="utf-8">
48// <![CDATA[
49  new Draggable('revertbox1',{scroll:window,handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
50  new Draggable('revertbox2',{
51    handle:'handle2',
52    revert:function(element){return ($('shouldrevert2').checked)},
53    onStart:function(){$('revertbox2').setStyle({backgroundColor:'#bfb'})},
54    onDrag:function(){$('event-info').update('drag!')},
55    onEnd:function(){alert('end!')}
56  });
57 
58  Droppables.add('droptarget1',{accept:['box1','otherstuff'],onDrop:function(){alert('drop!')}});
59  Droppables.add('droptarget2',{accept:'box',onDrop:function(){alert('drop!')}});
60 
61 
62  new Draggable('specialbox',{
63    endeffect:function(){
64      new Effect.Highlight('specialbox',{queue:'end'});
65    }
66  });
67  new Draggable('specialbox2',{
68    starteffect:function(){
69      new Effect.Highlight('specialbox2',{queue:'end'});
70    }
71  });
72  new Draggable('specialbox3',{
73    starteffect:function(){
74      new Effect.Highlight('specialbox3',{queue:'end'});
75    },
76    endeffect:function(){
77      new Effect.Highlight('specialbox3',{queue:'end'});
78    }
79  });
80// ]]>
81</script>
82
83
84</body>
85</html>
Note: See TracBrowser for help on using the browser.