Remove the sortable before the Ajax call, then reinitialize the
sortable after the content has loaded.

On May 28, 8:44 pm, jGalzic <[EMAIL PROTECTED]> wrote:
> I am using drag & drop with Sortable.create between 2 groups on a page
> but I'm running into a problem with the elements not dragging and
> dropping after a section update with 'Ajax.Request'.
>
> When the page is initially loaded, everything works but after I invoke
> the remote update which refreshes the specific div that contains the
> Sortables, the elements are no longer droppable.
>
> Should I be recreating a new set of Sortable object whenever the div
> section is returned from the server or only once when the page is
> initially loaded? I tried both and neither seem to work for me. Each
> time the items are returned back from the server, they have unique ids
> so there are never two 'item_1' items for the div id in 'group1'
>
> prototype version: 1.6.1
> scriptaculous version: 1.8.1
>
> my html looks like:
>
> <form onsubmit="showLoader();
>        new Ajax.Updater('myUpdateSection',  '/person/list',
> {asynchronous:true,evalScripts:true,onComplete:function(e)
> {hideLoader()},parameters:Form.serialize(this)});return false"
>       method="POST" action="person/list"
>       id="myRemoteForm">
>
>                 <input fields go here>
>
>                 <input type="submit" id="submitButton" name="submitButton"
> value="Update"/>
> </form>
>
> <div id="myUpdateSection">
>
> <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>
>
>         <div id="group2" class="section">
>                 <h3 class="handle">Group 2</h3>
>         </div>
> </div>
>
> <script type="text/javascript">
>         // <![CDATA[
>         Sortable.create('group1',{tag:'div',dropOnEmpty: true, containment:
> sections,only:'lineitem'});
>         Sortable.create('group2',{tag:'div',dropOnEmpty: true, containment:
> sections,only:'lineitem'});
>         Sortable.create('page',{tag:'div',only:'section',handle:'handle'});
>         // ]]>
>  </script>
>
> </div>
--~--~---------~--~----~------------~-------~--~----~
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@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to