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 :)
Rick
On Wed, Sep 9, 2009 at 2:05 PM, Dr. Underhook <[email protected]> wrote:
>
> 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
-~----------~----~----~----~------~----~------~--~---
