简体繁体 English

由于拖动元素中的点，JavaScript 拖放 XY 位置在放下时关闭

[英]JavaScript drag n drop XY location when dropped is off due to point in drag element

原文 2019-07-24 00:07:59 6 1 javascript/ html/ angular/ drag-and-drop/ html5-draggable

I am trying to create a drag and drop application when I can drop a marker on an image.当我可以在图像上放置标记时，我正在尝试创建一个拖放应用程序。 While this is an Angular app I am using plain old JS API for the drag and drop do to issues with CDK .虽然这是一个 Angular 应用程序，但我使用普通的旧 JS API 进行拖放操作以解决CDK问题。

I am able to move a 20x20 div around the image and drop it and set the location on the image by setting the top/left style of the div.我可以在图像周围移动一个20x20 div 并将其放下并通过设置 div 的顶部/左侧样式来设置图像上的位置。 However, the problem I am having is that the offset[XY] is the point of the mouse down.但是，我遇到的问题是offset[XY]是鼠标按下的点。 So if I grab the upper left corning my div lands where I expect.所以如果我抓住左上角，我的 div 就会落在我期望的地方。 If I grab the div in the middle, then it is off by the drag point offset.如果我抓住中间的 div，那么它会因拖动点偏移而关闭。

How can I correct for this offset of the draggable?我该如何纠正可拖动的这个偏移量？ Or is there a better solution?或者有更好的解决方案吗？

1 个解决方案

One of my coworkers came up with a great solution.我的一位同事想出了一个很好的解决方案。 Subscribe to the mousedown event to find the offset and then do the math.订阅 mousedown 事件以查找偏移量，然后进行数学运算。