Note that there are some explanatory texts on larger screens.

plurals
  1. PODrag and drop containers with link anchors using Yahoo API
    primarykey
    data
    text
    <p>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.</p> <p>I want to allow the reordering of images in a gallery.</p> <p>I can reorder the div containers just fine, if they don't contain a link. How can I make those divs draggable?</p> <p>The problem is pretty much the same as adding link anchors to the yahoo example from <a href="http://yuilibrary.com/yui/docs/dd/list-drag.html" rel="nofollow">http://yuilibrary.com/yui/docs/dd/list-drag.html</a></p> <pre><code>&lt;div id="play"&gt; &lt;ul id="list1"&gt; &lt;li class="list1"&gt;&lt;a href="#"&gt;Item #1&lt;/a&gt;&lt;/li&gt; &lt;li class="list1"&gt;&lt;a href="#"&gt;Item #2&lt;/a&gt;&lt;/li&gt; &lt;li class="list1"&gt;&lt;a href="#"&gt;Item #3&lt;/a&gt;&lt;/li&gt; &lt;li class="list1"&gt;&lt;a href="#"&gt;Item #4&lt;/a&gt;&lt;/li&gt; &lt;li class="list1"&gt;&lt;a href="#"&gt;Item #5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>I believe the list items would not be draggable in this case, either.</p> <p>So my code looks like this:</p> <pre><code>&lt;div class="alt1" style="padding:6px;" width="100%" align="center" id="play"&gt; &lt;div style="width:162px; height:166px; margin:5px; float:left" class="list1"&gt; &lt;a href="album.php?pictureid=147828"&gt;&lt;img src="/123.jpg" alt="" border="0" style="padding:6px;" width="130" height="130" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div style="width:162px; height:166px; margin:5px; float:left" class="list1"&gt; &lt;a href="album.php?pictureid=147828"&gt;&lt;img src="/123.jpg" alt="" border="0" style="padding:6px;" width="130" height="130" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>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.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload