Jquery自定义调整大小句柄不起作用

时间:2012-08-13 02:10:20

标签: jquery jquery-ui drag-and-drop jquery-resizable

我想要一个类似于下图的可实现对象上的句柄。

我尝试的代码无法使用自定义句柄。

如果我包含自定义句柄选项,则重新调整大小根本不起作用。

<style>
    .object{
        width: 100px; height: 100px; border: 1px solid black;

}
#myContainer{
    height: 600px;
    border: 2px solid #ccc;
}
.handle{
    height: 10px; width: 10px; background: red;
}
</style>
<script type="text/javascript">
$(function() {
    $("#resizable").resizable({
        handles: { 'all': $('#handle') }
      });
});
</script>

<div id="myContainer">
    <div class="object" id="resizable">
        <div id="handle" class="handle"></div>
    </div>
</div>

enter image description here

2 个答案:

答案 0 :(得分:1)

你见过http://jqueryui.com/demos/resizable/吗?

您可以添加一些代码来将div的边框更改为虚线边框,并将背景图像用于八个方块?

答案 1 :(得分:1)