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

Posted 2023-05-08

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

【英文标题】：How to center a draggable item on droppable image-map area using jQuery?

【发布时间】：2021-11-05 16:05:10

【问题描述】：

我有一个带有图像的 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=""  title="P0" href="" coords="82,230,82,1,45,17,10,71,1,117,12,166,45,213" shape="poly">
                <area id="C1" target=""  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”区域内将那个蓝色方块（拖放）居中。希望有可能！

抱歉，有些英语语法错误

提前感谢大家！

【问题讨论】：

欢迎来到 Stack Overflow。请提供一个最小的、可重现的示例：***.com/help/minimal-reproducible-example

解决您的问题，...我可以将拖动的项目定位在图像地图区域的中心...答案是肯定的。如何更难。请查看：jqueryui.com/position

【参考方案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   xmlns="http://www.w3.org/2000/svg">
      <ellipse ry="225" rx="200" cy="225" cx="200" stroke="#000" fill="green"/>
      <rect   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/