Could not move as at top or bottom already

[kbaum]

Trying to simulate the resorting but i keep getting the error:

Could not move as at top or bottom already

My sortable jquery looks like:

$('div#tour-book-form #spaces').sortable({ opacity: 0.6, items: 'div.tour_book_space', update: function() {
  $.ajax({
    type: "POST",
    url: '/tour_book_spaces/position?' + $(this).sortable('serialize'),
    data: { _method: 'PUT'}
  }); 
}     
}); 

And my list looks like:

<div id="spaces" class="ui-sortable">

  <div id="tour_book_space_1" class="tour_book_space space_14" style="opacity: 1;">
    <div class="image"><img src="/uploads/space/photo/14/property_listing_585049235001_1007635203001_vs-1007437921001.jpg" alt="Property_listing_585049235001_1007635203001_vs-1007437921001" style="c
    <div class="title">5 Rigney Terrace </div>
    <div class="comment-link"> 
      <div class="input text optional" style="display: none;"><label for="tour_book_tour_book_spaces_attributes_0_comment" class="text optional"> Comment</label><textarea rows="20" name="tour_book[t
      <a href="#">comment</a> 
    </div>
  </div><input type="hidden" value="1" name="tour_book[tour_book_spaces_attributes][0][id]" id="tour_book_tour_book_spaces_attributes_0_id">
  <div id="tour_book_space_2" class="tour_book_space space_15" style="opacity: 1;">
    <div class="image"><img src="/uploads/space/photo/15/property_listing_arc-113-1308536831455.jpg" alt="Property_listing_arc-113-1308536831455" style="cursor: move;"></div>
    <div class="title">87068 Muir Crossing </div>
    <div class="comment-link"> 
      <div class="input text optional" style="display: none;"><label for="tour_book_tour_book_spaces_attributes_1_comment" class="text optional"> Comment</label><textarea rows="20" name="tour_book[t
      <a href="#">comment</a> 
    </div>
  </div><input type="hidden" value="2" name="tour_book[tour_book_spaces_attributes][1][id]" id="tour_book_tour_book_spaces_attributes_1_id">
  <div id="tour_book_space_3" class="tour_book_space space_16">
    <div class="image"><img src="/uploads/space/photo/16/property_listing_arc-113-1308537045281.jpg" alt="Property_listing_arc-113-1308537045281" style="cursor: move;"></div>
    <div class="title">649 Surrey Terrace </div>
    <div class="comment-link"> 
      <div class="input text optional" style="display: none;"><label for="tour_book_tour_book_spaces_attributes_2_comment" class="text optional"> Comment</label><textarea rows="20" name="tour_book[t
      <a href="#">comment</a> 
    </div>
</div>

I execute:

$('#tour_book_space_2').simulateDragSortable({ move: 1, listItem: 'div.tour_book_space'  });

[mattheworiordan]

Hi Kbaum

I'd really need the entire HTML & CSS to test this, as the divs without styling will not be draggable. Can you provide a complete working example?

Matt

[kbaum]

Hi Matt. I have an example as a zip. Not sure of the best way to get you it. Can you message me privately on github and we can work out the details offline?

thx!

[mattheworiordan]

Done, emailed you privately.

[omeraslam-vteams]

hi i am having the same issue where i have the li list and have to drag and drop it says warning: Could not move as at top or bottom already

[staeff]

@mattheworiordan I find the same error/problem. Any hints how it has been solved?

[mattheworiordan]

Sorry, I don't have time to support this anymore :(