Primer commit del sistema avantika sin cambios
This commit is contained in:
211
javascript/scoluos/test/functional/dragdrop7_test.html
Executable file
211
javascript/scoluos/test/functional/dragdrop7_test.html
Executable file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title></title>
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
|
||||
Position.includeScrollOffsets = true;
|
||||
|
||||
Draggables.clear = function (event) {
|
||||
while (Draggables.drags.length) {
|
||||
var d = Draggables.drags.pop();
|
||||
var e = d.element;
|
||||
d.stopScrolling();
|
||||
d.destroy();
|
||||
d.element = null;
|
||||
if (e.parentNode) {e.parentNode.removeChild(e)};
|
||||
}
|
||||
}
|
||||
|
||||
function cleanup() { //try to remove circular references
|
||||
lis = document.getElementsByTagName("li");
|
||||
for (i = 0; i < lis.length; i++) {
|
||||
if (lis[i].longListItem) {lis[i].longListItem.destroy();}
|
||||
else if (lis[i].container) {lis[i].container.destroy();}
|
||||
}
|
||||
Draggables.clear();
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
var li = $("masterList").getElementsByTagName('LI');
|
||||
for (var i = 0; i < li.length; i++) {
|
||||
//var d = new LongListItem(li[i]);
|
||||
//li[i].onmousedown = d.onMouseDown.bindAsEventListener(d);
|
||||
var d = new Draggable(li[i],
|
||||
{revert: true,
|
||||
ghosting: false,
|
||||
scroll: "rightContainers"
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
var divs = $("rightContainers").getElementsByTagName("div");
|
||||
for (i = 0; i < divs.length; i++) {
|
||||
if (divs[i].className && Element.hasClassName(divs[i], "container")) {
|
||||
Droppables.add(divs[i].id, {hoverclass: "hover", scrollingParent: "rightContainers"});
|
||||
}
|
||||
}
|
||||
Event.observe(window, 'unload', cleanup, false);
|
||||
}
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
margin:0; padding: 0;
|
||||
height: 100% !important;
|
||||
}
|
||||
body {
|
||||
position:relative;
|
||||
color: black;
|
||||
background-color: white;
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: small;
|
||||
}
|
||||
h1 {font-size:115%;}
|
||||
h2 {font-size: 110%;}
|
||||
h3 {font-size: 105%;}
|
||||
div, p, li, td {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: small;
|
||||
}
|
||||
p {margin: 0 0 .7em 0; padding:0;}
|
||||
ul {
|
||||
position:relative;
|
||||
list-style: none;
|
||||
margin:0; padding:0;
|
||||
overflow: visible;
|
||||
}
|
||||
li {position:relative;}
|
||||
|
||||
.instructions {font-style:italic;}
|
||||
#leftDiv {
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0;
|
||||
width: 30%;
|
||||
margin: 0; padding: 7px;
|
||||
border-right: 2px solid #bb9;
|
||||
background-color: #eed;
|
||||
}
|
||||
|
||||
#leftDiv li, #rightContainers div.container li {
|
||||
margin: 3px 0; padding: 3px 3em 3px 10px;
|
||||
border: 2px solid #456;
|
||||
background-color: #cde;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
#rightContainers {
|
||||
padding: .5em;
|
||||
position: absolute;
|
||||
top: 0; bottom: 0; right: 0; left: 35%;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
#rightContainers div.container{
|
||||
background-color: #bb9;
|
||||
margin: 0 0 40px 0; padding: 0 0 1px 0;
|
||||
border: 2px solid #775;
|
||||
}
|
||||
|
||||
#rightContainers div.container h2{
|
||||
margin:0; padding: 2px 1em 0 1em;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#rightContainers div.container ul {
|
||||
margin: 5px; padding: 0 3px;
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#rightContainers div.container ul.empty {
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
#rightContainers div.hover {
|
||||
background-color: #eed;
|
||||
}
|
||||
</style>
|
||||
<!--[if IE]><style type="text/css">
|
||||
#leftDiv {
|
||||
height: expression((document.body.clientHeight - 44) + "px");
|
||||
}
|
||||
#leftDiv ul{width:93%;}
|
||||
#leftDiv li div.count {
|
||||
right:4px;
|
||||
top:4px;
|
||||
}
|
||||
#rightContainers li a.remove {
|
||||
display:block;
|
||||
float:none;
|
||||
position:absolute;
|
||||
top: 4px;
|
||||
right: 1.6em;
|
||||
margin:0; padding:0 .2em;
|
||||
}
|
||||
</style><![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="leftDiv" class="">
|
||||
<form id="frmContinue" action="#" method="post">
|
||||
<p class="instructions">Shrink your window until the right-hand pane is scrollable.</p>
|
||||
<p class="instructions">Drag from the list on left to groups on the right, force the right-hand pane to scroll.</p>
|
||||
<input name="data" type="hidden" value=" ">
|
||||
</form>
|
||||
<ul id="masterList">
|
||||
<li id="drag1">One</li>
|
||||
<li id="drag2">Two</li>
|
||||
<li id="drag3">Three</li>
|
||||
<li id="drag4">Four</li>
|
||||
<li id="drag5">Five</li>
|
||||
<li id="drag6">Six</li>
|
||||
<li id="drag7">Seven</li>
|
||||
<li id="drag8">Eight</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="rightContainers" class="">
|
||||
</form>
|
||||
<div id="grp1" class="container">
|
||||
<h2><span id="grp1_name">Group 1</span></h2>
|
||||
<ul id="grp1ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp2" class="container">
|
||||
<h2><span id="grp2_name">Group 2</span></h2>
|
||||
<ul id="grp2ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp3" class="container">
|
||||
<h2><span id="grp3_name">Group 3</span></h2>
|
||||
<ul id="grp3ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp4" class="container">
|
||||
<h2><span id="grp4_name">Group 4</span></h2>
|
||||
<ul id="grp4ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp5" class="container">
|
||||
<h2><span id="grp5_name">Group 5</span></h2>
|
||||
<ul id="grp5ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp6" class="container">
|
||||
<h2><span id="grp6_name">Group 6</span></h2>
|
||||
<ul id="grp6ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp7" class="container">
|
||||
<h2><span id="grp7_name">Group 7</span></h2>
|
||||
<ul id="grp7ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp8" class="container">
|
||||
<h2><span id="grp8_name">Group 8</span></h2>
|
||||
<ul id="grp8ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp9" class="container">
|
||||
<h2><span id="grp9_name">Group 9</span></h2>
|
||||
<ul id="grp9ul" class="empty"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user