Rails spinoffs - Feb 2008 - Multiple sortables on the same page, independant of each other?

Hi,

I would like to create two or more independant sortables on the same
page.

The first sortable would be a simple div with some text in it.
The second sortable would be inside the first div, and have thumbnail
images in it (photo gallery).

I can get both to either one or the other to work, but not both at the
same time... any ideas?

Cheers,

Y

My code:

        <div id="textbox_dragndrop">

        <!-- #textbox 0 -->
        <a name="t1"></a>
        <div id="t_243" class="textbox">
          <div id="msg_t1" class="msg"></div>
          <p>We bring together a team of website designers and
developers:</p>
          <a class="moveable">MOVE</a>
        </div><!-- #end textbox 0 -->


        <!-- #textbox 1 -->
        <a name="t2"></a>
        <div id="t_253" class="textbox">
          <div id="msg_t2" class="msg"></div>
          <h3>Movie</h3>
          <p>View a short movie of how... Click on movie to start
playing.</p>
          <a class="moveable">MOVE</a>
        </div><!-- #end textbox 1 -->


        <!-- #textbox 2 -->
        <a name="t3"></a>
        <div id="t_258" class="textbox">
          <div id="msg_t3" class="msg"></div>
          <h3>Test</h3>
          <p><h3>Heading 3</h3>
          <p>Websites build...</p>

          <!-- #gallery -->
          <script>
            Event.observe(window,''load'',init,false);
            function init() {
             
Sortable.create(''gallery258'',{tag:''div'',
containment:''gallery258'', constraint:false,
onUpdate:reorderGallery3})
            }
            function reorderGallery3(container) {
              var url = ''inc/gallery_sort.php'';
              var params = Sortable.serialize(container.id) +
''&key=258'';
              var ajax = new Ajax.Updater(''msg_t3'', url, {
                asynchronous: true,
                parameters: params,
                scope: ''gallery3'',
                onSuccess: ajax_msg(''msg_t3'', ''moving
images...'')
              });
            }
          </script>
          <div class="gallery" id="gallery258">
            <div class="photo" id="item_447">
              <a href="/images/detail/z_imgp6176.jpg"
rel="shadowbox[roadtrip-gallery3]" title=""><img
src="/images/thumb/
z_imgp6176.jpg" title="Click to enlarge z_imgp6176.jpg, 667x667px, 62
Kb" alt="z_imgp6176.jpg" width="135"
height="101"></a><br />
              <p id="editcap_2" class="caption">add
caption..</p>
              <script type="text/javascript">
                new Ajax.InPlaceEditor(''editcap_2'',
''edit/
gallery_photo.php?do=update&id=447'');
              </script>
            </div>
            <div class="photo" id="item_446">
              <a href="/images/detail/z_imgp6592.jpg"
rel="shadowbox[roadtrip-gallery3]" title=""><img
src="/images/thumb/
z_imgp6592.jpg" title="Click to enlarge z_imgp6592.jpg, 667x667px, 82
Kb" alt="z_imgp6592.jpg" width="135"
height="101"></a><br />
              <p id="editcap_2" class="caption">add
caption..</p>
              <script type="text/javascript">
                new Ajax.InPlaceEditor(''editcap_2'',
''edit/
gallery_photo.php?do=update&id=446'');
              </script>
            </div>
            <div class="photo" id="item_448">
              <a href="/images/detail/z_imgp5231.jpg"
rel="shadowbox[roadtrip-gallery3]" title=""><img
src="/images/thumb/
z_imgp5231.jpg" title="Click to enlarge z_imgp5231.jpg, 667x667px, 118
Kb" alt="z_imgp5231.jpg" width="135"
height="101"></a><br />
              <p id="editcap_2" class="caption">add
caption..</p>
              <script type="text/javascript">
                new Ajax.InPlaceEditor(''editcap_2'',
''edit/
gallery_photo.php?do=update&id=448'');
              </script>
            </div>
            <div id="caption_3"></div>
          </div>
          <a class="moveable">MOVE</a>
        </div><!-- #end textbox 2 -->

      </div><!-- #dragndrop -->
  <script>
    Sortable.create(''textbox_dragndrop'',
{tag:''div'', only:''textbox'',
handle:''moveable'', constraint:''vertical'',
onUpdate:updateList})

    function updateList(container) {
      var url = ''update/textboxes_reorder.php'';
      var params = Sortable.serialize(container.id);
      var ajax = new Ajax.Request(url, {
        method: ''post'',
        parameters: params,
        scope: ''textboxes'',
        onLoading: showMsg(''moving textboxes...'',
''save''),
        onSuccess: function(t) {
          var response = t.responseText;
          if (response == ''ok'') {
            showMsg(''Textboxes moved'', '''');
          } else {
            showMsg(''Textboxes not moved, something went
wrong...'',
''error'');
          }
        }
      });
    }
  </script>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---