Initial check-in
[dygraphs.git] / mochikit_v14 / examples / simple_dnd / dnd_hoverclass.html
CommitLineData
6a1aa64f
DV
1<html>
2<head>
3<title>script.aculo.us Drag and drop functional test file</title>
4 <script type="text/javascript" src="../../MochiKit/MochiKit.js"></script>
5 <script type="text/javascript" src="../../MochiKit/Position.js"></script>
6 <script type="text/javascript" src="../../MochiKit/Visual.js"></script>
7 <script type="text/javascript" src="../../MochiKit/DragAndDrop.js"></script>
8</head>
9<style>
10 div.hoverclass123 {
11 border:1px solid red;
12 }
13</style>
14<body>
15
16<h1>script.aculo.us Drag and drop functional test file</h1>
17
18<h2>w/o hoverclass</h2>
19
20<div id="cart" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba">
21### DROP HERE ###
22</div>
23
24<script type="text/javascript">new MochiKit.DragAndDrop.Droppable('cart', {ondrop:function(element,dropon){alert('w/o hoverclass, should be \'product_id\':' + encodeURIComponent(element.id) + ', dropon should be \'cart\':' + dropon.id)}})</script>
25
26<br/>
27
28<img alt="Product2" id="product_id" src="icon.png" /> &lt;-- drag this!
29
30<script type="text/javascript">new MochiKit.DragAndDrop.Draggable('product_id', {revert:true})</script>
31
32<h2>w/ hoverclass</h2>
33
34
35<div id="carth" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba">
36### DROP HERE ###
37</div>
38
39<script type="text/javascript">new MochiKit.DragAndDrop.Droppable('carth', {hoverclass:'hoverclass123',ondrop:function(element, dropon, event){alert('w/ hoverclass: should be \'product_id\':' + encodeURIComponent(element.id) + ', dropon should be \'carth\':' + dropon.id)}})</script>
40
41
42</body>
43</html>