javascript - Flutter拖放坐标系

Question

我希望将Cordova-Vuejs-jqueryUI移动应用程序移植到Flutter。该应用程序的主要功能是使用拖放功能将足球运动员拖入球场。像这样： 查看 GIF

球场有position: relative和球员有position: absolute。当一名球员被摔倒时，其偏移量将根据其在球场上的位置转换为百分比值。这基本上是：将音高的大小除以播放器元素的偏移位置（element.offsetTop，element.offsetLeft）。其结果是一个相对值，我可以将其存储到数据库中以供以后重新加载。这确保了不同屏幕尺寸的玩家位置一致性。

function calculateRelativeUnits(droppableSelector, draggable) {
      const dropW = $(droppableSelector).outerWidth();
      const dropH = $(droppableSelector).outerHeight();

      const left = $(draggable).offset().left;
      const top = $(draggable).offset().top;

      const percentageW = parseFloat((left / dropW) * 100).toFixed(1);
      const percentageH = parseFloat((top / dropH) * 100).toFixed(1);

      return {
        left: percentageW,
        top: percentageH
      };
    }

但是现在，我怎样才能将这个功能移植到 Flutter 中呢？是否有类似于基于位置相对和绝对位置的像素值，我可以稍后将其转换为百分比值？我一直在研究 Flutter 提供的拖放小部件，但我还没有找到使这个相对定位系统工作的方法。

谢谢！

标签： javascriptflutterdrag-and-dropjquery-ui-draggable