Member Avatar for shrutib

Hello all,
My problem is there will be list of images where i need to swap the images to sort it like the way how i want to see.Say for example, image 1- position-1,
image 2 position 2 etc. When i drag image 1 position 1 to image 5 position 5,position 1 image 5 and position 5 image 1 should display(swapping).
Also please let me know how to handle this drag and drop with swapping for more than 100 images?
I want the solution in Jquery/Javascript/Ajax. Help it's urgent.

Using Rails 2.3.5, Ruby 1.8.7 MySQL

Thanks in advance

  • 2 Contributors
  • 3 Replies
  • 458 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Member #905211

Dani AI

Generated

— 's pointer to jQuery UI Sortable is a good starting point. Sortable will handle drag helpers, placeholders and keyboard accessibility for you, but since you specifically want a swap (drag item A onto item B and have A and B exchange places) you need to convert the default “reorder” behavior into a swap on drop. Below is a concise, practical approach you can apply immediately.

Use Sortable to get the drag UX, then on stop hide the helper, detect the element under the cursor, and swap the two DOM nodes. Send only the two IDs to the server so the backend persists the swap (fast and minimal). Example client code (assumes each item has class .image-item and data-id):

var $dragged;
$('#images').sortable({
  helper: 'clone',
  start: function(e, ui){
    $dragged = ui.item;
  },
  stop: function(e, ui){
    ui.helper.hide(); // let elementFromPoint see real elements
    var el = document.elementFromPoint(e.clientX, e.clientY);
    ui.helper.show();
    var $target = $(el).closest('.image-item');
    if ($target.length && !$target.is($dragged)) {
      // simple safe swap via clones
      var $a = $dragged.clone(true);
      var $b = $target.clone(true);
      $dragged.replaceWith($b);
      $target.replaceWith($a);
      // persist minimal info
      $.post('/images/swap', { id1: $a.data('id'), id2: $b.data('id') });
    }
  }
});

Server-side (Rails): wrap the swap in a transaction and swap position values (or use a single UPDATE with CASE for atomicity). Example:

def swap
  id1, id2 = params[:id1].to_i, params[:id2].to_i
  Image.transaction do
    a, b = Image.find(id1), Image.find(id2)
    a_pos, b_pos = a.position, b.position
    a.update_attribute(:position, b_pos)
    b.update_attribute(:position, a_pos)
  end
  render :json => { ok: true }
end

Notes and troubleshooting:

  • For 100+ images: lazy-load thumbnails and use event delegation; avoid re-rendering the whole list on every change.
  • Mobile: jQuery UI needs a touch shim (or use a touch-friendly library).
  • CSRF: include your Rails authenticity token in AJAX if protection is enabled.
  • Concurrency: consider optimistic locking or refresh positions after remote edits.

This gives the exact swap UX you described while keeping client/server work minimal and scalable.

Recommended Answers

All 3 Replies

Member Avatar for Member #905211

Can you show what you have done so far?

Member Avatar for shrutib

Thanks for the reply.Haven't started yet. I need to know how can i acheive that? I am fetching the list from database and trying to define the order of display of images as i wish to see. Or otherwise, if there is any other alternate method for acheiving this,please let me know. It should be able to handle more than 100 images also.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.