CODEWITHSUNDEEP
jqueryjquery-ui-sortable
Alon Shmiel
Alon Shmiel

Reputation: 7121

sortable data from table2 to table1

I just want the user has an option to move items from the lower table(#sortable2) to the upper table (#sortable1).

I think it's related to {'connectWith':'.connectedSortable',

I tried: {'connectWith':'#sortable1, .connectedSortable', but it doesn't work..

$(document).ready(function(){
 jQuery('#sortable1, #sortable2')
 .sortable(
 {'connectWith':'.connectedSortable',
 'dropOnEmpty':true,
 'scroll':true,
  items: "li:not(.emptyMessage)",
  receive: function(event, ui) {
         //hide empty message on receiver
         $('li.emptyMessage', this).hide();

         //show empty message on sender if applicable
         if($('li:not(.emptyMessage)', ui.sender).length == 0){
             $('li.emptyMessage', ui.sender).show();
         } else {
             $('li.emptyMessage', ui.sender).hide();
         }            
     }

  });
});

this is my index.html.erb:

<html>
  <body>


   <ul id="sortable1" class="connectedSortable"> 


    <% @tasks_worker_todo.each do |task| %>
          <li class="ui-state-default">
            <%= best_in_place task, :done, :classes => 'highlight_on_success', type: :checkbox, collection: %w[No Yes] %> | 
            <%= task.admin_mail %> | 
            <%= task.task %>
          </li>
    <% end %>
  </ul>


  <br><br>

  <ul id="sortable2" class="connectedSortable">
    <% @tasks_worker_done.each do |task| %>
          <li class="ui-state-highlight">
             <%= best_in_place task, :done,:classes => 'highlight_on_success', type: :checkbox, collection: %w[No Yes] %> | 
             <%= task.admin_mail %> | 
             <%= task.task %>
          </li>
    <% end %>
  </ul>


</body>
</html>

please help.

Upvotes: 0

Views: 71

Answers (1)

charlietfl
charlietfl

Reputation: 171679

per the docs connectWith is a one-way relationship.

Try this: 

'connectWith':'#sortable1'

DEMO: http://jsfiddle.net/8TCxY/41/

Upvotes: 1

Related Questions