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 <dean.el...@gmail.com> wrote:
> Anyone have any idea's ?
>
> On Sep 6, 10:55 pm, Script-N00b <dean.el...@gmail.com> 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>&nbsp;&nbsp;|&nbsp;
>
> > <a href="#" onClick="$('G1').show();$('G2').hide();$('G3').hide();" />Group 
> > 1</a>&nbsp;&nbsp;|&nbsp;
>
> > <a href="#" onClick="$('G1').hide();$('G2').show();$('G3').hide();" />Group 
> > 2</a>&nbsp;&nbsp;|&nbsp;
>
> > <a href="#" onClick="$('G1').hide();$('G2').hide();$('G3').show();" />Group 
> > 3</a>&nbsp;&nbsp;
>
> > </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 prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to