如何使用 jQuery 将可拖动项目居中放置在可放置的图像地图区域上？

Question

我有一个带有图像的 HTML 文件，它的图像映射和一个可拖动的项目（div 元素）。我还有一个 jQuery 文件，我在其中制作了一个可放置的图像/图像映射和一个可拖动的项目。因此，当我将项目拖动到图像映射（可放置）区域时，该区域会突出显示，我通常可以执行一些代码（使用 .mapster() - http://blog.outsharked.com/2012/02/dragging-and-dropping-onto-html-image.html 制作）。因此，我的问题是我可以将拖动的项目定位在图像地图区域的中心，而不是图像，图像地图区域。它现在看起来很难看，当图像上有更多项目时，它只是被拖拽并且如此凌乱。这是关于轮盘赌的，所以它需要居中并且好看。代码如下：

HTML

<div style="border: 1px solid red;" class="ui-widget-header">

        <div id="container">
            <img id="mainSectorBet" class="mainSectorBet" src="http://localhost:5500/slike/mainSectorBet.png" usemap="#image-map">
    
            <map name="image-map" id="my-image-map">
                <area id="nula" target="" alt="P0" title="P0" href="" coords="82,230,82,1,45,17,10,71,1,117,12,166,45,213" shape="poly">
                <area id="C1" target="" alt="C1" title="C1" href="" coords="151,142,177,164" shape="rect">
            </map>    
        </div>

        
        <div id="draggable" class="divar">

        </div>
</div>

JQUERY

$( function () {
    $('#mainSectorBet').mapster({
        mapKey: "alt",
        fillOpacity: 0.8,
        fillColor: 'ff0000',
        stroke: true,
        strokeWeight: 2,
        strokeColor: '00ff00',
        onConfigured: function() {
            $('#mainSectorBet').siblings().css('z-index', 0);
            $('#mainSectorBet').css('z-index', 10);
        }
    }).parent().css({"display":"flex", "justify-content":"center", "align-items": "center"});

    $(".divar" ).css('z-index', 5).draggable({
        opacity: "0.5",
        cursor: "grabbing",
        revert: 'invalid',
        drag: function(){
            $(this).css('z-index', 5)
        }
    });

    $("#mainSectorBet").droppable({
        drop: function(event, ui) {
            var landing = $('#mainSectorBet').mapster('highlight');
            //$(ui.draggable).css('z-index', 20);

            if(landing){
                alert("Landing: " + landing);
            }            
        }
    });
})

图片：

Roulette image

所以我想在绿色“0”区域内将那个蓝色方块（拖放）居中。希望有可能！

抱歉，有些英语语法错误

提前感谢大家！

Answer 1

考虑以下内容。

$(function() {
  function animate(to) {
    $(this).stop(true, false).animate(to);
  }

  $(".divar").css('z-index', 5).draggable({
    opacity: "0.5",
    cursor: "grabbing",
    revert: 'invalid',
    drag: function() {
      $(this).css('z-index', 5)
    }
  });

  $("#container").droppable({
    drop: function(event, ui) {
      var $drag = ui.draggable;
      if (ui.position.left < 200) {
        event.pageX = $(this).position().left + 100;
        event.pageY = $(this).position().top + 225;
      }
      $drag.position({
        my: "center",
        at: "center",
        of: event,
        using: animate
      });
    }
  });
})

#draggable {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.whiteText {
  font: 50px sans-serif;
  fill: white;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="border: 1px solid red;" class="ui-widget-header">
  <div id="container">
    <svg width="1000" height="450" xmlns="http://www.w3.org/2000/svg">
      <ellipse ry="225" rx="200" cy="225" cx="200" stroke="#000" fill="green"/>
      <rect height="450" width="800" y="0" x="200" stroke="#000" fill="red"/>
      <text x="100" y="250" class="whiteText">0</text>
    </svg>
  </div>
  <div id="draggable" class="divar">
  </div>
</div>

我使用了 SVG，因为我无法使用您的图像复制示例。您可以考虑使用 SVG 而不是 Image Map。

当他们的项目被丢弃时，你可以检查它的位置并使用.position()移动它。见演示：https://jqueryui.com/position/#cycler

在这种情况下，我知道如果它距离图像边缘 200 px 以内，它就在椭圆区域（或 0 部分）。然后只需计算位置并将元素居中在该位置即可。

查看更多：https://api.jqueryui.com/position/