Question

我尝试根据以下内容同时实现可拖动和可调整大小的DIV元素： http://jqueryui.com/draggable/ http://jqueryui.com/resizable/

当我使用一个DIV时效果很好。我可以移动并调整DIV的大小。

但是当我使用多个DIV时，它不能正常工作。当我调整一个DIV的大小时，另一个DIV自动改变位置。

我该如何解决？

我包含以下链接：

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

我使用以下JQuery：

<script type="text/javascript">
    $(document).ready(function () {
        $('.yellow').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;

}

我使用以下DIV：

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

Answer 1

你应该调用与你的班级匹配的函数foreach elem

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>

可拖动和可调整大小的DIV不起作用

1 个答案: