1

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

你有什么想法可以通过其他方式解决吗？

4

1 回答 1

0

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

文档

于 2013-11-04T12:02:20.537 回答