将句柄图标添加到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 bar的左边).

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