Reorder image gallery

Question

I have an unordered list of image thumbnails. Each thumbnail links to the full size image. I use the YUI3 library to allow drag & drop reordering of the thumbnail images (just the out-of-the-box example code).

The problem is the link to the fullsize image: it is not draggable. Only the small portions underneath the thumbnail (with title and value) are draggable.

<ul>
<li class="imgcontainer">
    <div>
        <a href="/image.jpg">
        <img src="thumbnail.jpg" border="0" alt="" />
        </a>
    </div>
    <div class="left">Title</div>
    <div class="right">$2.00</div>
    <div class="clear"></div>
</li>
<!-- ... -->
</ul>

What is the best way to allow users to reorder the images in such an image gallery? Add a drag handle icons to a corner of the list items? Create a "reorder mode" in which the link anchors are removed, leaving only draggable images? Or can it be set up so that the links still can be dragged?

show your code, so we can see for example, what you are attaching the events to — Billy Moon, Jan 23 '13 at 14:22
I attach the drag event to the list item. So the whole container is draggable - except the link to the image. — reggie, Jan 24 '13 at 17:58

score 0 · Accepted Answer · answered Feb 21 '13 at 12:18

Your problem is that the anchor tag is not a valid drag handle per default. You can change this by using removeInvalid('a') on your drag instance.

var dd1 = new Y.DD.Drag({
    node: '#drag1'
});

dd1.removeInvalid('a');

Another option would be to remove the anchor tag

<div class="linked-image">
    <img src="http://placekitten.com/50/50" border="0" alt="" />
</div>

and add a click listener to the image.

Y.on('click', function () {
    alert('go to url');
}, '.linked-image');

Both approaches are demonstrated here: http://jsfiddle.net/xGQne/

Note that the click event fires after the drag is completed in both cases. You will need to differentiate between clicks and drags to make this work smoothly.

Reorder image gallery

1 Answers1