jQuery-ui 可拖动和可调整大小的 div 无法从左侧正确调整大小答案

【问题标题】：jQuery-ui draggable and resizable div can't resize from the left properlyjQuery-ui 可拖动和可调整大小的 div 无法从左侧正确调整大小
【发布时间】：2013-12-18 15:35:30
【问题描述】：

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

代码如下： HTML

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

JS：

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

CSS：

  #draggableDiv {
     position:fixed !important;
     width:auto;
     height:auto;
     left:100px;
     top: 100px;
   }

   #resizableDiv {
     height: 200px;
     width: 200px;
   }

   #content { height:100%; width:100%; }

我应该怎么做才能使可拖动的 div 正确调整大小？

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

您需要使外部容器#draggableDiv 可调整大小。如果你这样做，那么还需要稍微修改你的 css 以将此 div 设置为所需的尺寸。例如，

http://jsfiddle.net/RkNT4/

html

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

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

css

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

【讨论】：

我之前尝试过，但没有成功。然而，它现在神奇地起作用了。谢谢

【解决方案2】：

您可以将 jquery 可拖动和调整大小应用到父容器，这很好用。

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

顺便说一句，我做了一个 Jsfiddle，您可以在其中检查
http://jsfiddle.net/kQtMF/

【讨论】：