使DIV关闭图标与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