Javascript 将光标捕捉到可拖动元素的特定点

我正在将缩略图从一个DIV拖到另一个DIV，并试图模仿AutoCAD、adobeillustrator和许多其他图形编辑软件中使用的“捕捉到网格”功能

问题1：
无论单击时指针在图像上的位置如何，如何使指针捕捉到要拖动的图像的0,0位置（x和y位置）

当我单击拖动图像时，指针会固定在单击时指针所在的位置，我要跟踪的坐标将是指针的坐标

我试过这个：

    cursor: url(mycustomcursor.png) 0 0 , auto; 

此时会显示自定义指针，但不会按预期捕捉到0,0

问题2：
如何使图像精确地粘贴在DIV中的位置，并返回从要放入的DIV顶部/左侧的偏移量（以像素为单位）

我不知道拖动时光标的位置是否相关，但当我用下面的脚本拖放图像时，图像移动的距离是我预期的两倍，换句话说，偏移量是预期的两倍。我已经添加了下面的脚本，并且不得不编辑出一堆（希望是）不相关的脚本，比如颜色、边框等的CSS。为了简化测试，我也只使用X坐标

<div style='overflow:scroll;text-align:left;position:absolute;width:90%;  height:180px;' ondrop='drop(event)' ondragover='allowDrop(event)'>
    <img id='image_1234' src='image_path/image.png' style='position:absolute;height:100px;' draggable='true' ondragstart='drag(event)'>
</div>
<div id='panel_frame' style='width:600px;height:300px;' ondrop='drop(event)' ondragover='allowDrop(event)'>
</div>

function allowDrop(evAllow) {
    evAllow.preventDefault();
}

function drag(evDrag) {
    evDrag.dataTransfer.setData('text', evDrag.target.id);
}

function drop(evDrop) {
    evDrop.preventDefault();
    var dropData = evDrop.dataTransfer.getData('text',evDrop.id);       
    evDrop.target.appendChild(document.getElementById(dropData));
    var offsetLeft = evDrop.clientX + 'px';
    document.getElementById(dropData).style.left = offsetLeft;
}

函数allowDrop（evAllow）{
evAllow.preventDefault（）；
}
函数拖动（evDrag）{
evDrag.dataTransfer.setData（'text'，evDrag.target.id）；
}
函数下降（evDrop）{
evDrop.preventDefault（）；
var dropData=evDrop.dataTransfer.getData（'text'，evDrop.id）；
evDrop.target.appendChild（document.getElementById（dropData））；
var offsetLeft=evDrop.clientX+'px'；
document.getElementById（dropData）.style.left=offsetLeft；
}

---

我正在Firefox中测试。感谢您的帮助。谢谢

您可能需要查看

element.offsetTop

和

element.offsetLeft

。根据您的布局技术，您可以将光标放置在[offsetTop，offsetLeft]上，这将为您提供屏幕左上角的位置。offsetTop似乎也采取了同样的行动。我想我可能需要1-获取图像左上角的坐标，然后2-单击时获取光标的坐标，然后3-以某种方式移动光标以消除差异。你怎么能移动光标呢？你能回答这两个问题吗@约翰