可在地图区域内拖动的 jQuery UI答案

【问题标题】：jQuery UI draggable within map area可在地图区域内拖动的 jQuery UI
【发布时间】：2013-11-15 00:55:09
【问题描述】：

我正在尝试使 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 事件，检查元素是否拖动以及我们是否离开了该区域。

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

【问题讨论】：

标签： jquery jquery-ui map draggable area

【解决方案1】：

您必须订阅draggable 的drag 事件并使用与您的碰撞区域相关的offset ui 参数进行碰撞检测。

Docs

【讨论】：

感谢拖动事件，我不知道。但是如何计算非矩形区域的碰撞？