图片右边边框div 观看jquery'selection'

Question

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

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

那个 div 在它的右边也有一个图像作为边框。

问题：jquery resize 方法只允许你在 div 的边缘调整 div 的大小，而我的边框在 div 的内部（我正在使用背景图像）。我怎样才能对齐我的图像边框和这个 jquery 调整大小（通过将 jquery 上的调整大小触发器向左移动几个像素，或者将 div 边框再移动几个像素到右边）

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

此外，在我的代码中，如果我尝试重新调整 div left/right 我有 7 个像素可以抓住 div 来移动它，但是在 jsfiddle 中我只得到了2？不确定为什么会这样，但我也喜欢能够编辑该值（例如：将其设置为 10 像素，以便用户可以 select 更轻松）。

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

编辑：换句话说，现在它在红线处调整大小（上图）我希望它在底线处调整大小：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'selection'

Image border on the right of div to watch jquery 'selection'

css

jquery

jquery-ui

jquery-resizable