Question

我正在将缩略图从一个DIV拖到另一个DIV，并试图模仿＆＃34;对齐网格＆＃34; AutoCAD，Adobe Illustrator，许多其他图形编辑软件等中使用的功能。

问题1：
我怎么能让指针捕捉到我点击拖动图像的0,0位置（x和y位置），无论点击时指针在图像的哪个位置？

当我点击拖动图像时，指针会指向点击时指针的位置，我要跟踪的坐标将用于指针。

我试过了：

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

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

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

我不知道拖动时光标位置是否相关，但是当我使用下面的脚本放下图像时，图像会移动两倍于我期望的距离，换句话说，offsetX值加倍。我已经添加了下面的脚本，并且必须编辑出一堆（希望）不相关的脚本，比如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;
}

我在Firefox中测试。任何帮助表示赞赏。谢谢！

将光标捕捉到可拖动元素

0 个答案: