1

私はJavaScriptにかなり慣れていないので、どんな助けでも素晴らしいでしょう！

この小さなコードブロックを作成して、divを取得してドラッグします。「dragme」IDをdivに割り当てますが、すべて問題なくダンディです。問題は、そのdivをhtmlから置き換えて、代わりにimg要素を配置すると（明らかに「dragme」IDをimgに割り当てる）、期待どおりに機能しないことです。

クリックしてimgをドラッグすると、実際には約3または4ピクセル移動し、マウスボタンを離すまでフリーズします（マウスアップ）。

img要素がdivと同じように動作するのを妨げるプロパティまたは特性はありますか？

var isClicked = false;
var startClientX = 0;
var startClientY = 0;
var startLeft = 0;
var startTop = 0;

window.addEventListener("load", addListeners, true);

function addListeners()
{
    document.getElementById("dragme").addEventListener("mousedown", mouseIsDown, false);
    document.getElementById("dragme").addEventListener("mouseup", mouseIsUp, false);
    window.addEventListener("mousemove", moveImage, false);

    function mouseIsDown(e)
    {   
        if (isClicked == false)
        {
            isClicked = true;
            startClientX = e.clientX;
            startClientY = e.clientY;
            startLeft = document.getElementById("dragme").offsetLeft;
            startTop = document.getElementById("dragme").offsetTop;
        }
    }

    function mouseIsUp()
    {
        if (isClicked == true)
        {
            isClicked = false;
        }
    }

    function moveImage(e)
    {               
        if (isClicked == true)
        {
            imageLeftDif = e.clientX - startClientX;
            imageTopDif = e.clientY - startClientY;
            var newLeftPos = (startLeft + imageLeftDif) + "px";
            var newTopPos = (startTop + imageTopDif) + "px";    

            document.getElementById("dragme").style.left = newLeftPos;
            document.getElementById("dragme").style.top = newTopPos;
        }
    }   
}
4

1 に答える 1

0

これにより、問題が修正されました（syazdaniによるコメントとして提供された回答）：

画像の組み込みブラウザのドラッグアンドドロップが開始されていると思い切って言います。e.preventDefaultを試して、mousedownハンドラでfalseを返します。–syazdani2012年12月2日17:26

于 2013-01-28T17:35:26.400 に答える