I am attempting to incorporate draggable and resizable DIV elements simultaneously using the following resources: http://jqueryui.com/draggable/ http://jqueryui.com/resizable/
It works well when I only use one DIV. I am able to move and resize the DIV.
However, when I have more than one DIV, it doesn't function properly. Resizing one DIV automatically changes the position of another.
How can I resolve this issue?
I have included the following link:
<link rel="stylesheet" type="text/css" href="style.css">
I am using the following JQuery:
<script type="text/javascript">
$(document).ready(function () {
$('.yellow').draggable().resizable();
});
I am using the following CSS:
.yellow {
background-color:#f6921e;
background:rgba(246,146,30,0.3);
border-color:#f6921e;
width: 50px;
height: 50px;
border-style:solid;
border-width:6px;
border-radius: 6px;
position:inherit;
position:fixed;
}
I am using the following DIV:
<div class="yellow" style="top:100px">
</div>