| 1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| 2 |
<html> |
|---|
| 3 |
<head> |
|---|
| 4 |
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
|---|
| 5 |
<title>Demonstrate Only Bug</title> |
|---|
| 6 |
<style type="text/css"> |
|---|
| 7 |
.field { background-color:green;border:1px solid black;padding:1em;width:100px; } |
|---|
| 8 |
.group { background-color:red;border:1px solid black;padding:1em;width:300px; } |
|---|
| 9 |
.groupDrop { background-color:#FF7F00;border:1px solid black;padding:1em;width:200px; } |
|---|
| 10 |
.zone { background-color:#CCCC00;border:1px solid black;padding:1em;width:400px; } |
|---|
| 11 |
</style> |
|---|
| 12 |
<script type=text/javascript src="../lib/prototype.js"></script> |
|---|
| 13 |
<script type=text/javascript src="scriptaculous.js"></script> |
|---|
| 14 |
<script type=text/javascript> |
|---|
| 15 |
var lastDebug = (new Date()).getTime(); |
|---|
| 16 |
function debug(msg) |
|---|
| 17 |
{ |
|---|
| 18 |
var now = (new Date()).getTime(); |
|---|
| 19 |
if ( now - lastDebug < 1000 ) $('debug').insert({bottom: '<br>'+msg } ); |
|---|
| 20 |
else $('debug').insert({bottom: '<hr>'+msg } ); |
|---|
| 21 |
lastDebug = now; |
|---|
| 22 |
} |
|---|
| 23 |
|
|---|
| 24 |
Event.observe( window, 'load', |
|---|
| 25 |
function(e) |
|---|
| 26 |
{ |
|---|
| 27 |
var drops = $$('.zone','.groupDrop').pluck('id'); |
|---|
| 28 |
|
|---|
| 29 |
$$('.groupDrop').each( |
|---|
| 30 |
function(groupDrop) |
|---|
| 31 |
{ |
|---|
| 32 |
Sortable.create( groupDrop.id, |
|---|
| 33 |
{ |
|---|
| 34 |
constraint: false, |
|---|
| 35 |
containment: drops, |
|---|
| 36 |
dropOnEmpty: true, |
|---|
| 37 |
onUpdate: function(e) { debug(e.id+': '+Sortable.serialize(e)); }, |
|---|
| 38 |
only: 'field', |
|---|
| 39 |
scroll: window, |
|---|
| 40 |
tag: 'div' |
|---|
| 41 |
} ); |
|---|
| 42 |
} ); |
|---|
| 43 |
|
|---|
| 44 |
$$('.zone').each( |
|---|
| 45 |
function(zone) |
|---|
| 46 |
{ |
|---|
| 47 |
Sortable.create( zone.id, |
|---|
| 48 |
{ |
|---|
| 49 |
constraint: false, |
|---|
| 50 |
containment: drops, |
|---|
| 51 |
dropOnEmpty: true, |
|---|
| 52 |
onUpdate: function(e) { debug(e.id+': '+Sortable.serialize(e)); }, |
|---|
| 53 |
scroll: window, |
|---|
| 54 |
tag: 'div' |
|---|
| 55 |
} ); |
|---|
| 56 |
} ); |
|---|
| 57 |
} ); |
|---|
| 58 |
</script> |
|---|
| 59 |
</head> |
|---|
| 60 |
<body> |
|---|
| 61 |
<div style="color:green">field = draggable</div> |
|---|
| 62 |
<div style="color:red">group = draggable, holds fields in groupDrop</div> |
|---|
| 63 |
<div style="color:#CCCC00">zone = holds fields and groups</div> |
|---|
| 64 |
<div class="zone" id="z_z1"> |
|---|
| 65 |
<div class="field" id="f_f1">field 1</div> |
|---|
| 66 |
<div class="field" id="f_f2">field 2</div> |
|---|
| 67 |
<div class="group" id="g_g1"> |
|---|
| 68 |
<div>group 1</div> |
|---|
| 69 |
<div class="groupDrop" id="gd_gd1">groupDrop 1</div> |
|---|
| 70 |
</div> |
|---|
| 71 |
<div class="group" id="g_g2"> |
|---|
| 72 |
<div>group 2</div> |
|---|
| 73 |
<div class="groupDrop" id="gd_gd2">groupDrop 2</div> |
|---|
| 74 |
</div> |
|---|
| 75 |
</div> |
|---|
| 76 |
<div class="zone" id="z_z2"></div> |
|---|
| 77 |
<div id="debug"></div> |
|---|
| 78 |
</body> |
|---|
| 79 |
</html> |
|---|
