放在一個固定的股利可拖動的div外（draggable.js）

林與draggable.js周圍的工作，我試圖讓一些文字顯示連接到被拖動的DIV ...放在一個固定的股利可拖動的div外（draggable.js）

所以，這個工作正常，但我想讓特定的文本出現在瀏覽器窗口的左上角，我試圖給它一個位置：fixed，但它總是停留在拖動的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/

正如我所說的，文本應該總是出現固定的，40像素，40像素，而不是在拖動的div內。

我做錯了什麼，有沒有人有想法？

來源

2016-07-29 Cyrill

問題是文本的位置是在絕對定位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/

來源

2016-07-29 15:20:59 Wolfgang

寫......非常感謝你！現在只有一件事，它顯示兩個文本，我找到了解決方案： $（this）.next（「。text」）。fadeIn（「slow」）; – Cyrill

哦是的..這就是爲什麼我添加了TODO，所以你可以添加所需的邏輯 – Wolfgang

如果你的頁面是可滾動的，你應該改變位置屬性爲絕對而不是固定的文本標籤 – Wolfgang

...我發現了一個解決方案，把DIV的.text在外面Ë.drag格...

然後在JS

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

來源

2016-07-29 15:27:00 Cyrill

放在一個固定的股利可拖動的div外（draggable.js）

回答

相關問題