jquery - マップ エリア内でドラッグ可能な 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 イベントについて考えています。それは要素のドラッグであり、その領域を離れたかどうかをチェックします。

これを別の方法で解決する方法について何か考えはありますか?