Javascript jQuery ui可拖动和可调整大小的div can'；t从左侧正确调整大小

我正在尝试在一个固定的位置制作一个可调整大小和拖动的div。 当我从右侧或底部调整div的大小时，它看起来很好；但是，当我从左侧或顶部调整其大小时，可拖动div似乎会在相反位置增加高度/重量

代码如下： HTML

CSS:

---

如何使可拖动div正确调整大小？

您需要使外部容器

#可拖动div

可调整大小。如果这样做，那么还需要修改css一点，以将此div设置为所需的维度。比如说,

html

<div id="draggableDiv">
    <div id="resizableDiv">
        <div id="content">
            <div id="contentTitle">content title</div>
            conteeeeeent
        </div>
    </div>
</div>

css

$('#draggableDiv').draggable({
    handle: '#contentTitle'
});
$("#draggableDiv").resizable({
    handles: 'n, e, s, w, ne, se, sw, nw'
});

/*colors were added for the example to separate each div*/
    #draggableDiv {
        position:fixed !important;
        width:auto;
        height:auto;
        left:100px;
        top: 100px;
        background-color:green;
        height:200px;
        width:200px;
    }
    #contentTitle{
        background-color:red;
        cursor:move;
    }
    #resizableDiv {
        height: 100%;
        width: 100%;
    }
    #content {
        height:100%;
        width:100%;
        background-color:blue;
    }

---

您可以将jquery draggable和resizeable应用于父容器，这很好

$('#draggableDiv').draggable({
   handle: '#contentTitle'
}).resizable({
   handles: 'n, e, s, w, ne, se, sw, nw'
});

顺便说一句，我做了一个Jsfiddle，您可以在其中检查

---

我以前试过，但没用。然而，它现在神奇地工作了。谢谢

$('#draggableDiv').draggable({
    handle: '#contentTitle'
});
$("#draggableDiv").resizable({
    handles: 'n, e, s, w, ne, se, sw, nw'
});

/*colors were added for the example to separate each div*/
    #draggableDiv {
        position:fixed !important;
        width:auto;
        height:auto;
        left:100px;
        top: 100px;
        background-color:green;
        height:200px;
        width:200px;
    }
    #contentTitle{
        background-color:red;
        cursor:move;
    }
    #resizableDiv {
        height: 100%;
        width: 100%;
    }
    #content {
        height:100%;
        width:100%;
        background-color:blue;
    }

$('#draggableDiv').draggable({
   handle: '#contentTitle'
}).resizable({
   handles: 'n, e, s, w, ne, se, sw, nw'
});