将句柄图标添加到jquery可调整大小

Question

我有一个div需要高度可调整大小。在顶部添加可调整大小的栏不是问题，但我还需要在灰色栏的左侧添加一个图标，这样用户可以更明显地拖动它。

不幸的是，我似乎无法让它发挥作用。设置ui-resizable-n类的背景不会起作用并向生成的句柄添加<img/>标记，虽然我可以让它看起来正确，但我无法抓取图标和拖动它。

有什么想法？

http://plnkr.co/edit/tAQbS6LYMebLGsCXPJwL?p=preview

布局：https://dl.dropboxusercontent.com/u/2227188/handle%20on%20the%20left.png（灰色条位于2个div之间，并且它们正在调整它们的大小..这部分已完成 - 请注意bray条左侧的图标）。

Answer 1

根据您的屏幕截图，您只需要在CSS中进行更改即可获得调整大小处理程序。

请根据截图更改处理程序的图片网址。

.lower .ui-resizable-n {
  background: url(http://i.stack.imgur.com/Xkiaa.png) no-repeat; 
  height: 10px;
  left: -8px; /*Adjust this value to fit it properly in the container*/
  top: -5px;
}
.lower.ui-resizable {
  border-top: 3px solid gray;
}

<强> DEMO