1

ある div から別の div に要素をドラッグできる JavaScript があります。ドラッグ中に要素をマウスカーソルにアタッチするコードを書きたいので、ユーザーはそれが場所を移動するのを見ることができます。

私はうまくいかない2つのことを試しました。コードを微調整する方法について何かアドバイスはありますか?

1つ試行

ドラッグした要素の位置を絶対位置に変更し、top,left をマウス座標に設定します。これの問題は、マウスアップでのみ起動することです..要素には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;
}

2つを試みます

これは、上記と同じキャプチャ マウス機能を使用します。今回はHTMLで要素に割り当てたondragstartリスナーに加えて、以下を発火させるonmousedownリスナーも入れてみました。ここでの問題は、ondragstart と競合することです。ターゲット要素に絶対位置を指定すると、その隣のインライン ブロック要素が代わりに 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