在画布中使用Jquery UI可调整大小/可拖动div的问题

时间:2015-03-12 22:30:20

标签: jquery jquery-ui

In this plunk我将div添加到画布中。 div是可调整大小和可拖动的(使用Jquery UI)。

目标是在画布的范围内调整/拖动许多div。

单击按钮创建新的div。这些应该在相对于画布的顶部= 50px,左边= 50px处创建。

有几个问题:

1 - 如果你点击" New Div"很多时候,即使我强迫它们(新的div进一步向下创建),也不会尊重top / left属性。

2 - 如果你调整div的大小,由于某种原因,画布高度减少到0px

3 - 如果我在画布周围移动div,我希望画布放大以包含div,因为div被附加到画布上。但是,您仍然看到画布边框并不总是包含div。

此代码有什么问题?

HTML

<button onclick="add()">New Div</button>
<div id="canvas"></div>

CSS

.div1 { width: 160px; height: 200px; position:absolute; border:1px solid black; background-color: #d2d2d2 }
canvas {width: 100%; height: 100%;border:1px dashed gray; position:relative;}

的Javascript

function add(){

    var $canvas = $("#canvas");
    var $div = $("<div></div>");
    $div.appendTo($canvas);

    // this is what doesn't work
    $div.css({ top: '50px', left: '50px' });

    $div.draggable();   
    $div.resizable();
    $div.addClass('div1');

}   

0 个答案:

没有答案