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