jQuery UI可在地图区域内拖动

Question

我正在尝试使div容器在图像映射区域内可拖动或检查我们是否在拖动元素时离开该区域，这里是示例：

我的第一次尝试是关于监听该区域的mouseleave / mouseout事件，但是当我将鼠标移动到可拖动元素上时它们每次调用，而当我离开该区域并拖动此元素时它们不会调用。

此外，我尝试使用{handler：$（'map'），}和{handler：$（'map area'），}选项，但是当我开始拖动时元素会消失。

这是HTML代码：

<div class="preview">
  <div class="image-wrapper ui-resizable ui-draggable" style="position: absolute;">
    <img src="img/image1.png" class="drag-image">
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div>
  </div>
  <img src="img/someimg.png" usemap="#imgmap2013112143545" class="bg-image" />
  <map id="imgmap2013112143545" name="imgmap2013112143545">
    <area shape="poly" alt="" title="" coords="117,75,144,94,229,113,276,113,358,89,381,75,395,123,316,203,281,245,269,239,247,239,238,241,234,246,179,192,141,158,112,121" href="/" target="">
  </map>
</div>

现在我正在考虑一些全局mousemove事件，检查是拖动的元素，我们是否离开了该区域。

你有什么想法可以解决这个问题吗？

Answer 1

您必须订阅drag的{​​{1}}事件，并使用相对于您的碰撞区域的draggable ui参数进行碰撞检测。

Docs