使用jQuery UI調整一個元素，改變另一個元素的位置

Question

我正在嘗試使用jQuery UI製作可重複和可拖動的標籤行。

問題是，如果我添加兩個標籤並嘗試調整第一個標籤的大小，它會更改第二個標籤的位置（，但如果我調整第二個標籤的大小，它不會更改第一個標籤的位置） 。

如何防止標籤在調整大小時更改其他標籤的位置..？

HTML：

<div id="main"> 
    <button id="s">add line</button> 
</div> 
<div id="line" class="hidden"> 
    <label class="dra"></label> 
</div> 

JS：

function makeline() { 

    $t = $(".dra", "#line").clone(true).draggable().resizable({ 
    handles: "s, n" 
    }); 

$("#main").append($t); 
} 
$("#s").click(function() { 
    makeline(); 
}); 

CSS：

.dra { 
    display: block; 
    background-color:red; 
    width: 7px; 
    height: 80px; 
    border: 1px solid red; 
} 
.hidden { 
    display: none; 
} 
#main { 
    border: 1px solid black; 
    width:500px; 
    height: 300px; 
} 

UPDATE：全部代碼JSFiddle

Answer 1

發生這種情況，因爲jQuery UI的小部件設置元素的位置relative默認情況下，把它留在的正常流動文件。您可以解決此問題通過應用position:absolute像元素：

.ui-resizable { 
    position:absolute !important; 
} 

---

這將導致它們堆疊在彼此的頂部，而不是一個低於另一個，因爲他們不是在正常的流程了。如下圖所示，你可以很容易地解決這個使用jQuery UI position()實用方法：

$("#s").click(function() { 
 
    $t = $("#line .dra").clone(true).draggable().resizable({ 
 
    handles: "s, n" 
 
    }) 
 
    if ($("#main").find(".dra").length) { 
 
    $t.position({ 
 
     at: "left bottom", 
 
     of: "#main .dra:last" 
 
    }) 
 
    }; 
 
    $("#main").append($t); 
 
});

.dra { 
 
    display: block; 
 
    background-color: red; 
 
    width: 7px; 
 
    height: 80px; 
 
    border: 1px solid red; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
#main { 
 
    border: 1px solid black; 
 
    width: 500px; 
 
    height: 300px; 
 
} 
 
.ui-resizable { 
 
    position: absolute !important; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
<div class="form-group"> 
 
    <label>ADD two line and RESIZE THE FIRST LINE it will scroll down the line added after it. NOW add a 3rd line and resize the second line it will scroll down the 3rd line and if you resize the very first line you added it will scroll down the other lines</label> 
 
    <div id="main"> 
 
    <button id="s">add line</button> 
 
    </div> 
 
    <div id="line" class="hidden"> 
 
    <label class="dra"></label> 
 
    </div>

可以調整定位不過你想要的。

Answer 2

如果您的標籤是：

<div class="label">Lorem ipsum</div> 

添加此CSS：

.label { 
    white-space: nowrap; 
}