Making the DIV close icon drag along with the DIV

Question

Here is the Fiddle

Can't figure out how to make the DIV close icon to follow the rest of the DIV when the DIV is dragged.

I seem to think there is something in this part of the code that I am not doing right.

$self = $(this);
$(opts.parent).append($self);
$('span.' + opts.classPrefix + '_oClose').remove();
$('body').append($overlayClose);
$('div.' + opts.classPrefix + '_overlay').remove();
$('body').append($overlay);
$self.draggable();

Appears to be something to do with how elements are appended to HTML body. I tried appending a blank div to body and then adding overlay and overlayClose to that blank div. But that did not even render the dialog. Any ideas?

Answer 1

As per Harrys demo http://jsfiddle.net/hari_shanx/8njzxhvx/3/

Line 24 has the magic :) Appending the close to the overlay then enabling the drag

  $self.append($overlayClose);
  $self.draggable();

Answer 2

I don't know about your code but I think you need a parent div that would be relatively positioned and a child that is absolutely positioned.
HTML

<div id="test">Hello! Trying to figure how to make the close div icon drag along with the div. 
<img class="close" src="https://cdn3.iconfinder.com/data/icons/status/100/close_4-512.png" alt="">
</div>  

CSS

#test {
    background: lightgrey;
    padding: 5px;
    position: relative;
    top: 100px;
}

img.close {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 15px;
    width: 15px;
    cursor: pointer;
}

For dragging I've used jQuery UI :

$( "#test" ).draggable();

$("img.close").click( function(e){
    $("#test").fadeOut();
}); 

I've made a fiddle that explains this:
FIDDLE

Answer 3

Try something like this:

<div id="test">
  <a href="javascript:void(0)" class="close">Close</a>
Hello! Trying to figure how to make the close div icon drag along with the div.</div>

CSS:

.close{
 float: right;
 top: -31px;
 position: relative;
 left: 23px;
 background:url()// your close icon

}

This will make your anchor tag draggable along with div and you can fire event on anchor tag for closing purpose