Airbnb-inspired Photo Uploader/Sorter

Showcase
1

After quite a few hours of hacking about ('twas my first use of the draggable groups/drop area elements), I got a slick Airbnb-inspired photo uploader and sorter (nearly completed). The one thing I don’t have worked out yet is that – when a dragged photo is over the photo it’s going to displace – the “to be moved” photo does not jump to the dragged photo’s original location.

I’ve been having rather a devil of a time figuring out how to make that work (I suspect that I have to fire a custom event when the dragged photo enters the Drop Area, and use that to trigger some other workflow that moves the photo group associated with the Drop Area’s cell to the original position of the dragged group – if anyone’s got a cute example of that, it would be appreciated). Anyway, here’s how it looks:

ABB-file-uploader-draggable-sorting
ABB-file-uploader-draggable-sorting1931×1685 322 KB

4 Likes
2

And just to be clear: SORTING works just fine. The part I’m talking about being incomplete is doing a “preview” whereby the currently-occupied cell clears itself and the photo that’s going to be displaced is shown in what WILL BE its location were one to drop the dragged photo.

At present, it works just fine, but comparing the current version of my uploader to ABB’s, I find that I like their approach a little better (it is, in fact somewhat hard to imagine what the sorted list will look like and giving a visual cue in advance of dropping is actually a helpful interface feature.

3

Eso se mira genial!!