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 -
>
>
--~--~---------~--~----~------------~-------~--~----~
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