Question

以下是Fiddle

无法弄清楚如何在拖动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();
});

我做了一个小提琴，解释了这一点：
FIDDLE

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一起可拖动，您可以在锚标记上触发事件以用于关闭目的

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

3 个答案: