使DIV关闭图标与DIV一起拖动

Question

这是小提琴

拖动DIV时，无法弄清楚如何使DIV关闭图标跟随DIV的其余部分。

我似乎认为代码的这一部分中有些东西我做得不对。

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

似乎与元素如何附加到HTML正文有关。 我尝试将一个空白div添加到body，然后将overlay和overlayClose添加到该空白div。 但这甚至没有呈现对话。 有任何想法吗？

Answer 1

根据Harrys演示http://jsfiddle.net/hari_shanx/8njzxhvx/3/

第24行具有魔力:)将附近贴近叠加然后启用拖动

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

Answer 2

我不知道你的代码，但我认为你需要一个相对定位的父div和一个绝对定位的子。
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;
}

对于拖动，我使用了jQuery UI ：

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

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

我做了一个解释这个问题的小提琴：
小提琴

Answer 3

尝试这样的事情：

<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

}

这将使您的锚标记与div一起可拖动，您可以在锚标记上触发事件以用于关闭目的