Question

我有一个使用jquery resize的div。

$( "#jobDisplay" ).resizable({ })

该div在其右侧还有一个边框图像。

问题：jquery resize方法只允许你在div的边缘调整div的大小，而我的边框在div内（我使用的是Background-image）。如何对齐我的图像边框，这个jquery调整大小更近（通过将jquery上的调整大小触发器向左移动几个像素，或者将div边框向右移动几个像素）

实施例：http://jsfiddle.net/bo6xwc28/

另外，在我的代码上，如果我尝试重新调整div左/右，我有7个像素抓住div移动它，但在jsfiddle我只有2？不确定为什么会这样，但id也喜欢能够编辑这个值（例如：将其设为10像素，以便用户可以更轻松地选择它）。

无论解决方案是什么，它都需要尽可能与跨浏览器兼容。

编辑：换句话说，现在它在红线处调整大小（顶部图片）我希望它在底线调整大小：http://postimg.org/image/dslgqsiul/

Answer 1

根据 docs ，添加句柄元素非常容易。我是这样做的：

#jobDisplay {
    ...
    position: relative;
}
.ui-resizable-handle-e {
    position: absolute;
    width: 25px;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

<div id="jobDisplay">
    <div class="ui-resizable-handle ui-resizable-handle-e"></div>
    ...

$("#jobDisplay").resizable({
    stop: function (event, ui) {},
    handles: {
        "e": ".ui-resizable-handle-e"
    }
});

<强> Demo

Answer 2

您可以使用

调整div内的调整大小手柄位置

.ui-resizable-se {
    /* Adjust resize-handle */
    right: 5px;
    bottom: -2px; 
}

JSFiddle：https://jsfiddle.net/ht5zdmx0/

Answer 3

您可以将内容包装在另一个div中，如下所示： jsFiddle

<div id="jobDisplay">
  <div class="wrap">
   <span>hey dfgdfgdfg dfg </span><br />
   <span>hey2 dfgdfgdfgdfg</span><br />
   <span>hey3 sdfsdfsdf</span><br />
  </div>
</div>

div右侧的图像边框可以观看jquery＆＃39;选择＆＃39;

3 个答案: