在 jQuery 可调整大小中添加手柄图标

Question

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

不幸的是，我似乎无法让它工作。将背景设置为ui-resizable-n类将不起作用，并且尽管我可以使其外观正确，但无法抓取图标并拖动它。

有什么想法吗？

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

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

- sirrocco

---

“我还需要在灰色条的左侧添加一个图标，以便用户更明显地知道他们可以拖动它。” 你能详细说明一下吗？最终结果应该是什么样子的？ - j08691

基本上是在行左侧的图标。 - sirrocco

我可能可以帮你解决这个问题，但是我还不太明白你想要什么。你能否将一个图像组合起来呢？ - j08691

谢谢您对此的关注。我已经在问题中添加了一张图片。 - sirrocco

Answer 1

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

请根据您的截图更改处理程序的图片URL。

.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

- mohamedrias