自定义拖动元素跳跃

问题描述

显然，我对鼠标光标和元素偏移的数学运算做了一些拙劣的操作，但我不知道是什么。为什么元素会跳这么多？目标是能够拖动元素，但我需要它保持相对于鼠标（即不是捕捉到光标）。此外，我实际上希望能够使用父元素进行拖动，如果这有意义的话，正如代码中所反映的那样。您可以在父容器上“拖动”以移动目标。

另外，我意识到还有其他问题需要改进（比如拖出页面等），但这个问题的目的是解决来回跳跃的问题。

let scaleX = 1;
let scaleY = 1;
let skewX = 0;
let skewY = 0;
let translateX = 0;
let translateY = 0;
let isPanning = false;

let $map = $('#map');
let $container = $('#mapCanvas');

function moveMap() {
    $("#map").css({
        transform: ` matrix(${scaleX},${skewX},${skewY},${scaleY},${translateX},${translateY})`
    });
}


$container.on("mousedown",function(event) {
  isPanning = true;
});
$container.on("mouseup",function(event) {
    isPanning = false;
});
$container.on("mousemove",function(event) {
    if (isPanning) {
        translateX = event.pageX + (event.pageX - $map.offset().left) ;
        translateY = event.pageY + (event.pageY - $map.offset().top);
        moveMap();
    }
});

#mapCanvas {
  position: absolute;
  left: 0;right:0;top:0;bottom:0;
  user-select: none;
}

#map {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid black;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mapCanvas">
    <div id="map">DRAG ME</div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

drag jquery mouseevent