javascript - 将固定的 div 放在可拖动的 div 之外 (draggable.js)

Question

我正在处理 draggable.js，我正试图让一些文本出现，这些文本连接到被拖动的 DIV ...

所以，这工作正常，但我想让特定的文本出现在浏览器窗口的左上角，我试图给它一个位置:固定的，但它总是停留在拖动的 DIV 中。

我以为我的 .text DIV 中添加了 .ui-draggable 类，但事实并非如此!

<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 Fiddle 以更好地理解我的问题: https://jsfiddle.net/7bzvvpjL/4/

正如我所说，文本应该始终固定显示，距离窗口 40px，40px，而不是在拖动的 div 内。

我做错了什么，有人知道吗？

Answer 1

问题是文本位置在绝对定位的 div 内。

我稍微修改了您的代码以展示它是如何工作的(即使有多种解决方案)。您需要做的是移动您的 text-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;
}

修改后的脚本:

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/