0

I modified the excellent Yahoo example to allow drag and drop of div containers. I basically just change all reference to "ul" and "li"s in the code to the classes of the div containers.

I want to allow the reordering of images in a gallery.

I can reorder the div containers just fine, if they don't contain a link. How can I make those divs draggable?

The problem is pretty much the same as adding link anchors to the yahoo example from http://yuilibrary.com/yui/docs/dd/list-drag.html

<div id="play">
    <ul id="list1">
        <li class="list1"><a href="#">Item #1</a></li>
        <li class="list1"><a href="#">Item #2</a></li>
        <li class="list1"><a href="#">Item #3</a></li>
        <li class="list1"><a href="#">Item #4</a></li>
        <li class="list1"><a href="#">Item #5</a></li>
    </ul>
</div>

I believe the list items would not be draggable in this case, either.

So my code looks like this:

<div class="alt1" style="padding:6px;" width="100%" align="center" id="play">
    <div style="width:162px; height:166px; margin:5px; float:left" class="list1">
        <a href="album.php?pictureid=147828"><img src="/123.jpg" alt="" border="0" style="padding:6px;" width="130" height="130" /></a>
    </div>
    <div style="width:162px; height:166px; margin:5px; float:left" class="list1">
        <a href="album.php?pictureid=147828"><img src="/123.jpg" alt="" border="0" style="padding:6px;" width="130" height="130" /></a>
    </div>
</div>

If I add the links (as above), I can only drag the div containers by their padding. If the links are not there, I can drag the images anywhere.

BrianC
  • 10,591
  • 2
  • 30
  • 50
reggie
  • 3,523
  • 14
  • 62
  • 97

1 Answers1

0

I have written a more complete answer to this here: Reorder image gallery

In short, the anchor tag is by default not a valid drag handle. You can change this by using removeInvalid:

dragInstance.removeInvalid('a');
Community
  • 1
  • 1
dfarnbo
  • 89
  • 5