Изменение размера одного элемента с использованием jQuery UI, изменяющего положение другого

Question

Я пытаюсь сделать resizible и draggable строки из ярлыков с помощью 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; 
}