jquery - jquery 拖动，忽略覆盖（绝对）定位的元素

Question

请检查这个FIDDLE

这是html

<div id="wrapper">
    <div class="button_area"></div>
    <div class="icon"></div>
<div>​

该图标位于 button_area 的顶部。

现在我必须拖动 .button_area: $('.button_area').draggable({});

如果我单击该区域并开始拖动它会起作用

但是如果我点击 .icon （位于该区域的顶部）并开始拖动，什么也不会发生......

对于 firefox 和 chrome，我在 stackoverflow 中找到了一个解决方案 gere，非常简单，只需在 .icon 中添加一个简单的 css url 就可以了。

.icon{
    pointer-events: none;
}

问题是这不适用于歌剧，也不适用于即。

让它跨浏览器工作的最佳解决方案是什么（我不介意ie6、7和8）......