I want to use a sortable to make a graphical and multiple select box
application on a web page.  The objective is move elements from box1
to box2 with some limitations:

We must have 4 elements max. on box2 (destination box)
If the user moves the element with id #1 to box2, only that element
would remain in box2 and the rest must return to box 1.

With the code, i can detect if the moved element is the 5th but i must
cancel the drag or return the last element of the box2 to box1. That
is a problem because i dont see any place in documentation to do
something like that.

The second answer is how to reset one of the boxes.  I have box1 and
box2 (original and destination boxes) and i want to reset the initial
status without reload the page. ┬┐Is there any method to do this?

Simple sample: triggerupdate is the function i use to check if the
element is 1st, 2nd, 3rd, 4th or +4th

<div id="page">

        <div id="group1" class="section">
                <h3 class="handle">Group 1</h3>
                <div id="item_1" class="lineitem">This is item 1</div>
                <div id="item_2" class="lineitem">This is item 2</div>
                <div id="item_3" class="lineitem">This is item 3</div>
                <div id="item_4" class="lineitem">This is item 4</div>


        <div id="group2" class="section">
                <h3 class="handle">Group 2</h3>

<input type=button onclick="resetea();">
<script type="text/javascript">
        // <![CDATA[
        Sortable.create('group1',{tag:'div',dropOnEmpty: true, containment:
        Sortable.create('group2',{tag:'div',dropOnEmpty: true, containment:
sections,only:'lineitem', onUpdate:function(){triggerupdate()}});
        // ]]>


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 
For more options, visit this group at 

Reply via email to