使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一起可拖動，您可以在錨標記上觸發事件以用於關閉目的