jquery - div右侧的图像边框以观看jquery'selection'

Question

我有一个使用 jquery 调整大小的 div。

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

该 div 的右侧还有一个图像作为边框。

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

示例：http: //jsfiddle.net/bo6xwc28/

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

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

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

Answer 1

您可以使用调整 div 内的调整大小句柄位置

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

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

Answer 2

您可以像这样将内容包装在另一个 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>

Answer 3

根据文档，添加句柄元素非常容易。我会这样做：

#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"
    }
});

演示