将固定div放在可拖动div（draggable.js）外部

Question

Im working around with the draggable.js and I am trying to let some text appear that is connected to the dragged DIV…

So, this works fine, but I want to let the specific text appear in the left-top corner of the browsers window, I tried to give it a position:fixed, but it always stays in the dragged DIV.

I tought it would be the .ui-draggable class that ist added to my .text DIV, but it was not!

<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;}

See my JS Fiddle to understand my problem better: https://jsfiddle.net/7bzvvpjL/4/

As i said, the text should always appear fixed, 40px, 40px, of the window and not inside the dragged div.

What am I doing wrong, does anybody have an idea?

Answer 1

The problem is that the text position is inside the absolute positioned div.

I slightly modified your code to show how it could work (even there are several solutions). What you need to do is moving your text-divs.

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 scripts:

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");
},

fiddle: https://jsfiddle.net/7bzvvpjL/7/

Answer 2

…i found a solution in putting the .text div outside the .drag div…

and then writing in the JS

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