Question

我正在使用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 div之外的解决方案......

然后在JS中写作

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

在可拖动的div之外放置一个固定的div（draggable.js）

2 个答案: