1

我有一些 javascript 允许将元素从一个 div 拖到另一个。我想编写一些代码，在拖动过程中将元素附加到鼠标光标，以便用户可以看到它移动位置。

我已经尝试了两件不太奏效的事情。关于如何调整代码的任何建议？

尝试一

将拖动元素的位置更改为绝对位置并将顶部，左侧设置为鼠标坐标。问题在于它只在 mouseup 上触发。元素有一个ondragstart监听器。当我拖动元素时，什么也没有发生；只有当它掉落时，它才会附着在鼠标上。

function drag(ev)
{


 ev.dataTransfer.setData("Text",ev.target.id);
 var data=ev.dataTransfer.getData("Text");

 body = document.getElementById('body');
 mouse = captureMouse(body);

body.addEventListener('mousemove',function(event)
   {
   document.getElementById(data).style.position="absolute";
   document.getElementById(data).style.top=mouse.y+"px";
   document.getElementById(data).style.left=mouse.x+"px";
   },false);


}


captureMouse = function(element)
{
var mouse = {x:100, y:100}

element.addEventListener('mousemove',function(event)
{
    var x,y;
    if(event.pageX||event.pageY)
    {
        x=event.pageX;
        y=event.pageY;
    }else{
        x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
        y=event.clientX+document.body.scrollTop+document.documentElement.scrollTop
    }

    x-=element.offsetLeft;
    y-=element.offsetTop;

    mouse.x=x;
    mouse.y=y;

},false);

return mouse;
}

尝试两次

这使用与上面相同的捕获鼠标功能。这一次，除了分配给 HTML 中元素的 ondragstart 侦听器外，我还放置了一个onmousedown侦听器，它会触发以下内容。这里的问题是它与 ondragstart 冲突。当我给目标元素一个绝对位置时，它旁边的 inline-block 元素会取而代之，并被 ondragstart 拾取。

有什么建议么？也许我应该完全摆脱我的 ondragstart ondragover 等并用 onmousedown 和 onmouseup 监听器替换？

function absolute(x){
body = document.getElementById('body');
mouse = captureMouse(body);
body.addEventListener('mousemove',function(event){
document.getElementById(x).style.position="absolute";
document.getElementById(x).style.top=mouse.y+"px";
document.getElementById(x).style.left=mouse.x+"px";
},false);
}
4

0 回答 0