Forum Academy Marketplace Showcase Pricing Features

Changing the Order of Images in a List Using Dropzones?

How would one go about changing the order of images in a list of images using the dropzone and drag/drop groups. Here is how I initially set it up:

Dropzone Group -> Draggable Group -> Image Uploader

When Image uploader is not empty hide image uploader and set image for that particular spot as a item# in a list of images for a listing. Then set the draggable group’s background image to be the listing’s image item # in the list. This worked like a charm but when now trying to set the listing images Item# via dropping the draggable group to the respective item number for that dropzone, I’ve run into a block. I just can’t seem to figure it out.

I imagined that when I dragged a draggable group over the dropzone, it could change the data of the listing image to set the item# to the dropzone’s item number using the drop action in workflow and then by reloading the data of the group showing the image in the new location and pushing the other images to their respectable next placements in the list. I just can’t seem to get it to work in this fashion. Can anyone suggest either a better way to accomplish this or how to accomplish this workflow effectively?

Thank you ahead of time.




Hello John, :slight_smile: If you’re trying to re-order listings, @vega.andrew has an awesome tutorial here using custom states and an order field. I think you could use a similar method, though your example is different since you’re using a repeating group to display listings. With that said, I think you can still use Andrew’s method. Instead of displaying listings using “Listing:item#1, Listing:item#2…” you could do "SearchForListings (constraint, order = 1):firstitem, SearchForListings (constraint, order = 2): first item. That should allow you to keep your layout, while still being able to reposition each listing through the order field, instead of the list’s item#.

@fayewatson Thank you so much for responding and the info. I saw this post a bit ago and tried his approach and got a great results up until I tried to delete/upload listings in between. e.g. Listing 1-4 and you delete 3 it seems to break the model. @romanmg has been instrumental in helping me get past the road blocks on this one and she and I are currently working to find the solution(s). I think it will lean towards using states and then saving a saved list of states to the db once reordering/deleting/uploading is finished but I’m truly the noob here so I tip my hat to @romanmg to clarify if this is how we will do it. I will surely post our solution once we find it. Thank you. :smile:

Ah, I see! No problem at all! That makes much more sense to use custom states and a list instead. You’re in the best hands with Gaby! Looking forward to seeing your solution. :smiley: