CODEWITHSUNDEEP
jqueryhtmlcss
kat1330
kat1330

Reputation: 5332

Draggable and Resizable DIV doesn't work

I try implement draggable and resizable DIV elements in same time according to following: http://jqueryui.com/draggable/ http://jqueryui.com/resizable/

It works good when I use one DIV. I can move and resize DIV.

But when I use more than one DIV, it doesn't work good. When I resize one DIV, another automatically change position.

How can I fix it?

I include following links:

<link rel="stylesheet" type="text/css" href="style.css">

I use following JQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $('.yellow').draggable().resizable();
    });

I use 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 use following DIV:

<div class="yellow" style="top:100px">
</div>

Upvotes: 1

Views: 277

Answers (1)

faby
faby

Reputation: 7558

you should call the function foreach elem that match your class

http://jsfiddle.net/Rc8S3/3/

jquery

$.each($('.yellow'),function(index,elem){$(elem).draggable().resizable();;})

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

.red {
background-color:#550000;

border-color:#f6921e; 
width: 50px;
height: 50px;
border-style:solid;
border-width:6px;       
border-radius: 6px;
position:inherit;
position:fixed;
}

html

<div class="yellow" style="top:100px">
</div> 
<div class="yellow" style="top:200px">
</div>

Upvotes: 2

Related Questions