Помещенный фиксированный DIV вне перетаскиваемом DIV (draggable.js)

Question

Im работая вокруг с draggable.js, и я пытаюсь дать какой-то текст появляется, что связано с перемещенного DIV ...

Таким образом, это работает отлично , но я хочу, чтобы конкретный текст появлялся в левом верхнем углу окна браузеров, я пытался дать ему положение: исправлено, но оно всегда остается в перетаскиваемом DIV.

Я бы это был класс .ui-draggable, который добавлен в мой .text DIV, но это не так!

<div class="drag axis" id="item_1"><div class="text">Some Text</div></div> 
<div class="drag axis" id="item_2"><div class="text">Another Text</div></div> 

CSS:

.text { 
display: none; 
position:fixed; 
top: 40px; 
left: 40px;} 

#item_1 { 
position: absolute; 
top: 100px; 
left: 50%; 
width: 500px; 
height: 100px; 
background-color: blue; 
z-index: 0; 
cursor: pointer;} 

#item_2 { 
position: absolute; 
top: 125px; 
left: 30%; 
width: 500px; 
height: 200px; 
background-color: red; 
z-index: 0; 
cursor: pointer;} 

Смотрите мой JS Скрипки, чтобы понять мою проблему лучше: https://jsfiddle.net/7bzvvpjL/4/

Как я сказал, текст должен всегда казаться фиксированным, 40px, 40px, окна а не внутри перетаскиваемого div.

Что я делаю неправильно, у кого-нибудь есть идея?

Answer 1

Проблема в том, что текстовое положение находится внутри абсолютного позиционированного div.

Я немного изменил ваш код, чтобы показать, как он может работать (даже есть несколько решений). Что вам нужно сделать, это перемещать текстовые div.

HTML:

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<div class="drag axis" id="item_1"></div><label for="item_1" class="text">Some Text</label> 
<div class="drag axis" id="item_2"></div><label for="item_2" class="text">Another Text</label> 

CSS:

.text { 
    position: fixed; 
    display: none; 
    top: 40px; 
    left: 40px; 
} 

modofoed скрипты:

start: function(event, ui) { 
    $(this).addClass('color'); 
    //TODO: check if this.id == text.for or find by for property before fadingin 
    $(".text").fadeIn("slow");//.css('position','fixed'); 
}, 
stop: function(event, ui) { 
    $(this).removeClass('color'); 
    //TODO (not necessary): check if this.id == text.for or find by for property 
    $(".text").fadeOut("slow"); 
}, 

скрипку: https://jsfiddle.net/7bzvvpjL/7/

Answer 2

... я нашел решение в положить .text DIV вне е .drag ДИВ ...

, а затем писать в JS

$(this).next(".text").fadeIn("slow");