something more or less like this maybe?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<html>
<head>
<title>Untitled</title>
<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
a {
margin: 0 5px;
}
.dragMember {
z-index: 10;
cursor: move;
}
.droppable {
height:200px;
width:200px;
background-color:yellow;
}
.hover {
border: 1px dashed green;
}
#Message {
position:relative;
left:110px;
}
</style>
</head>
<body>
<script type="text/javascript">
var slots = {G1: 2, G2: 1, G3: 5};
document.observe('dom:loaded', function() {
$$('.dragMember').each( function (d) { new Draggable(d,
{revert:true}); });
Droppables.add('DropDiv_G1', {
hoverclass: 'hover',
accept: 'G1',
onDrop: DropHandler
});
Droppables.add('DropDiv_G2', {
hoverclass: 'hover',
accept: 'G2',
onDrop: DropHandler
});
Droppables.add('DropDiv_G3', {
hoverclass: 'hover',
accept: 'G3',
onDrop: DropHandler
});
});
function DropHandler(ele, tgt) {
if (tgt.childElements().length < slots[ele.title]) {
if (!$('theForm')[ele.id]) {
$('itemPost').insert('<input type="text" name="' + ele.id + '"
value="' + ele.id +'">');
ele.hide();
tgt.insert(ele);
ele.appear();
}
} else {
alert('slot ' + ele.title + ' is filled up');
}
}
</script>
<p>
<a href="#" onClick="$$('.dragMember').invoke('show');">All</a> |
<a href="#" onClick="$$('.dragMember').invoke('hide'); $$
('.G1').invoke('show');">Group 1</a> |
<a href="#" onClick="$$('.dragMember').invoke('hide'); $$
('.G2').invoke('show');">Group 2</a> |
<a href="#" onClick="$$('.dragMember').invoke('hide'); $$
('.G3').invoke('show');">Group 3</a>
</p>
<table>
<tr>
<td valign="top">
<table>
<tr>
<td valign="top">
<div id="G1">
<div align="center" class="G1 dragMember" id="DragDiv1"
title="G1">Item 1</div>
<div align="center" class="G1 dragMember" id="DragDiv2"
title="G1">Item 2</div>
<div align="center" class="G1 dragMember" id="DragDiv3"
title="G1">Item 3</div>
</div>
<div id="G2">
<div align="center" class="G2 dragMember" id="DragDiv4"
title="G2">Item 4</div>
<div align="center" class="G2 dragMember" id="DragDiv5"
title="G2">Item 5</div>
<div align="center" class="G2 dragMember" id="DragDiv6"
title="G2">Item 6</div>
</div>
<div id="G3">
<div align="center" class="G3 dragMember" id="DragDiv7"
title="G3">Item 7</div>
<div align="center" class="G3 dragMember" id="DragDiv8"
title="G3">Item 8</div>
<div align="center" class="G3 dragMember" id="DragDiv9"
title="G3">Item 9</div>
</div>
</td>
</tr>
</table>
</td>
<td valign="top">
<table>
<tr>
<td><div class="droppable" id="DropDiv_G1"></div></td>
<td><div class="droppable" id="DropDiv_G2"></div></td>
<td><div class="droppable" id="DropDiv_G3"></div></td>
</tr>
</table>
</td>
</tr>
</table>
<form id="theForm" method="get">
<div id="itemPost"></div>
<input type="submit" value="submit" />
</form>
</body>
</html>
On Sep 8, 4:59 pm, Script-N00b <[email protected]> wrote:
> Anyone have any idea's ?
>
> On Sep 6, 10:55 pm, Script-N00b <[email protected]> wrote:
>
> > I know it's sloppy (Because I am still learning) but here is what I
> > have so far...
>
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
> > <html>
> > <head>
> > <title>Untitled</title>
> > <script src="../../lib/prototype.js" type="text/javascript"></script>
> > <script src="../../src/scriptaculous.js" type="text/javascript"></
> > script>
> > <style type="text/css">
> > #DropDiv_G1
> > {
> > height:200px;
> > width:200px;
> > background-color:yellow;
> > }
> > #DropDiv_G2
> > {
> > height:200px;
> > width:200px;
> > background-color:yellow;
> > }
> > #DropDiv_G3
> > {
> > height:200px;
> > width:200px;
> > background-color:yellow;
> > }
> > .DropHover
> > {
> > border:1px dashed green;
> > }
> > #Message
> > {
> > position:relative;
> > left:110px;
> > }
> > .Handle
> > {
> > cursor: move;
> > }
> > </style>
> > </head>
>
> > <body>
>
> > <script type="text/javascript" language="javascript" charset="utf-8">
> > window.onload = function()
> > {
> > for (i=1; i<=31; i++){
> > EntMembers = 'DragDiv' + i
> > if($(EntMembers)){
> > new Draggable(EntMembers,{revert:true});
> > }
> > }
> > Droppables.add('DropDiv_G1', {
> > accept: ["G1"],
> > onDrop:function(e){DropHandler(e,'DropDiv_G1')}
> > });
> > Droppables.add('DropDiv_G2', {
> > accept: ["G2"],
> > onDrop:function(e){DropHandler(e,'DropDiv_G2')}
> > });
> > Droppables.add('DropDiv_G3', {
> > accept: ["G3"],
> > onDrop:function(e){DropHandler(e,'DropDiv_G3')}
> > });
>
> > function DropHandler(element,el){
> > $('itemPost').innerHTML = ('<input type="text" name="'+ element.id
> > +'" value="'+ element.id +'">');
> > element.parentNode.removeChild(element);
> > }}
>
> > </script>
> > <p>
> > <a href="#" onClick="$('G1').show();$('G2').show();$('G3').show();"
> > />All</a> |
>
> > <a href="#" onClick="$('G1').show();$('G2').hide();$('G3').hide();" />Group
> > 1</a> |
>
> > <a href="#" onClick="$('G1').hide();$('G2').show();$('G3').hide();" />Group
> > 2</a> |
>
> > <a href="#" onClick="$('G1').hide();$('G2').hide();$('G3').show();" />Group
> > 3</a>
>
> > </p>
> > <table>
> > <tr>
> > <td valign="top">
> > <table>
> > <tr>
> > <td valign="top">
> > <div id="G1">
> > <div align="center"
> > class="G1" id="DragDiv1"><div
> > class="Handle">Item 1</div></div>
> > <div align="center"
> > class="G1" id="DragDiv2"><div
> > class="Handle">Item 2</div></div>
> > <div align="center"
> > class="G1" id="DragDiv3"><div
> > class="Handle">Item 3</div></div>
> > </div>
> > <div id="G2">
> > <div align="center"
> > class="G2" id="DragDiv4"><div
> > class="Handle">Item 4</div></div>
> > <div align="center"
> > class="G2" id="DragDiv5"><div
> > class="Handle">Item 5</div></div>
> > <div align="center"
> > class="G2" id="DragDiv6"><div
> > class="Handle">Item 6</div></div>
> > </div>
> > <div id="G3">
> > <div align="center"
> > class="G3" id="DragDiv7"><div
> > class="Handle">Item 7</div></div>
> > <div align="center"
> > class="G3" id="DragDiv8"><div
> > class="Handle">Item 8</div></div>
> > <div align="center"
> > class="G3" id="DragDiv9"><div
> > class="Handle">Item 9</div></div>
> > </div>
> > </td>
> > </tr>
> > </table>
> > </td>
> > <td valign="top">
> > <table>
> > <tr>
> > <td><div id="DropDiv_G1"></div></td>
> > <td><div id="DropDiv_G2"></div></td>
> > <td><div id="DropDiv_G3"></div></td>
> > </tr>
> > </table>
> > </td>
> > </tr>
> > </table>
> > <form action="POST">
> > <div id="itemPost"></div>
> > </form>
> > </body>
> > </html>
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
