StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Since you want the icon to ultimately be clickable, I would avoid my gut intention to use <code>:after</code> on a containing element to show the icon. Instead, I would use a simple <code>div</code> wrapper with both your draggable image, and an icon inside:</p> <pre><code><div class="draggable-image"> <img src="http://placekitten.com/100/100" /> <img src="help.png" class="icon" /> </div> </code></pre> <p>Then I would style the container to be <code>inline-block</code>, so that it matches the width (and height, for the most part) of its child <code>img</code>. This is also a good time to position the icon within the container:</p> <pre><code>.draggable-image { position: relative; display: inline-block; } .draggable-image img.icon { position: absolute; top: 10px; right: 10px; } </code></pre> <p>Now we can bind up the draggable event, referencing the draggable image from within the <code>ui.helper</code> object provided to our various draggable methods:</p> <pre><code>$(".draggable-image").draggable({ stop: function( event, ui ) { alert( $("img:first", ui.helper).attr("src") ); } }); </code></pre> <p>Note I'm access the <code>:first</code> image, avoiding our <code>.icon</code> image. Lastly, we can bind some click logic to our <code>.icon</code> so that we can react to people clicking it:</p> <pre><code>$(".draggable-image .icon").on("click", function(){ alert( "You've clicked the icon" ); }); </code></pre> <p>Demo: <a href="http://jsbin.com/ihugas/3/edit" rel="nofollow">http://jsbin.com/ihugas/3/edit</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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