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