This is AWESOME!  Thanks Underhook!!




On Sep 10, 10:21 am, "Dr. Underhook" <monty.mu...@gmail.com> wrote:
> several updates for you.
> - cleaned up cataloging droppables
> - added dropSrc members to facilitate 'unDrop'
> - revised the form input members to include an id (helps w/ removal
> later)
> - added UndropHandler
>
> dragging the dragMember back to it's home div will remove it from the
> target, re-insert it into the home div, and remove the form's input
> element
>
> <!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;
>     }
>     .dropSrc  {
>       min-height: 60px;
>       width: 75px;
>       margin: 10px;
>       background-color: #f8f8f8;
>     }
>     .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}); });
>     $$('.droppable').each( function (d) {
>       Droppables.add(d, {
>         hoverclass: 'hover',
>         accept: d.title,
>         onDrop: DropHandler
>       });
>     });
>     $$('.dropSrc').each( function (d) {
>       Droppables.add(d, {
>         hoverclass: 'hover',
>         accept: d.id,
>         onDrop: UndropHandler
>       });
>     });
>   });
>   function DropHandler(ele, tgt) {
>     if (tgt.childElements().length < slots[ele.title]) {
>       if (!$('theForm')[ele.id]) {
>         $('itemPost').insert('<input id="dm' + ele.id + '" type="text"
> name="' + ele.id + '" value="' + ele.id +'">');
>         ele.hide();
>         tgt.insert(ele);
>         ele.appear();
>       }
>     } else {
>       alert('slot ' + ele.title + ' is filled up');
>     }
>   }
>   function UndropHandler(ele, tgt) {
>     $('dm' + ele.id).remove();
>     tgt.insert(ele);
>   }
> </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" class="dropSrc">
>               <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" class="dropSrc">
>               <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" class="dropSrc">
>               <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" title="G1"></
> div></td>
>           <td><div class="droppable" id="DropDiv_G2" title="G2"></
> div></td>
>           <td><div class="droppable" id="DropDiv_G3" title="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 10, 6:38 am, Script-N00b <dean.el...@gmail.com> wrote:
>
>
>
> > Now to get the rest of this thing working :)
>
> > On Sep 9, 5:21 pm, Rick Waldron <waldron.r...@gmail.com> wrote:
>
> > > Awesome!
> > > Rick
>
> > > On Wed, Sep 9, 2009 at 6:15 PM, Dean Elzey <dean.el...@gmail.com> wrote:
> > > > Worked perfectly, hack or not :)
>
> > > > On Wed, Sep 9, 2009 at 5:11 PM, Rick Waldron 
> > > > <waldron.r...@gmail.com>wrote:
>
> > > >> this is WAY hackish...
> > > >>  >droppableDivs.each(function (_div) {
> > > >> >   Droppables.add(_div, {
> > > >> >      hoverclass: 'hover',
> > > >> >      accept: *_div.split('_')[1]*,
> > > >> >      onDrop: DropHandler
> > > >> >   });
> > > >> >});
>
> > > >> ...but it works. And makes me look less absent minded.
>
> > > >> On Wed, Sep 9, 2009 at 6:09 PM, Rick Waldron 
> > > >> <waldron.r...@gmail.com>wrote:
>
> > > >>> Response 1: Yeah i totally overlooked that one... whoops.
> > > >>> Response 2: Yes, I did that on purpose, it was a test... yeah... a 
> > > >>> test.
>
> > > >>> I'll let you decide.
>
> > > >>> Rick
>
> > > >>> On Wed, Sep 9, 2009 at 5:48 PM, Dean Elzey <dean.el...@gmail.com> 
> > > >>> wrote:
>
> > > >>>> Yep, working on that now :)
>
> > > >>>> On Wed, Sep 9, 2009 at 4:44 PM, Chris Sansom 
> > > >>>> <ch...@highway57.co.uk>wrote:
>
> > > >>>>> At 14:39 -0400 9/9/09, Rick Waldron wrote:
> > > >>>>> >Since you say your are just learning, I'd like to impart a tip :)
>
> > > >>>>> >Instead of...
>
> > > >>>>> >    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
> > > >>>>> >    });
>
> > > >>>>> >try....
>
> > > >>>>> >var droppableDivs = ['DropDiv_G1', 'DropDiv_G2', 'DropDiv_G3'];
>
> > > >>>>> >droppableDivs.each(function (_div) {
> > > >>>>> >   Droppables.add(_div, {
> > > >>>>> >      hoverclass: 'hover',
> > > >>>>> >      accept: 'G3',
> > > >>>>> >      onDrop: DropHandler
> > > >>>>> >   });
> > > >>>>> >});
>
> > > >>>>> >Cleaner and DRYer :)
>
> > > >>>>> ...except that in the original they accepted G1, G2 and G3 in turn,
> > > >>>>> rather than all accepting G3, so you'd have to jump through an extra
> > > >>>>> hoop in your loop. :-)
>
> > > >>>>> --
> > > >>>>> Cheers... Chris
> > > >>>>> Highway 57 Web Development --http://highway57.co.uk/
>
> > > >>>>> My best advice to anyone who wants to raise a happy,
> > > >>>>> mentally healthy child is: Keep him or her as far away
> > > >>>>> from a church as you can.
> > > >>>>>    -- Frank Zappa- Hide quoted text -
>
> > > - Show quoted text -- Hide quoted text -
>
> - Show quoted text -
--~--~---------~--~----~------------~-------~--~----~
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