2

次の作業コードがあります（このフィドルも参照してください）：

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:170px;padding:10px;border:1px solid #aaaaaa;}
#drag1 {width:50px;height:50px;padding:10px;border:1px solid #000;background-color: #f00; position: absolute;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
//window.alert( ev.clientX + ',' + ev.clientY);
document.getElementById("drag1").style.left = ev.clientX + 'px';
document.getElementById("drag1").style.top = ev.clientY + 'px';
return false;

} 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div id="drag1" draggable="true" ondragstart="drag(event)"></div>
</div>
</body>
</html>

ここでは、メインの div 内でのみ、色付きの div をドラッグ アンド ドロップできます。問題は、この赤い div がドロップした位置から少しジャンプすることです。これは、マウス ev.clientX と Y を使用しているためだと思います。では、DIV がドロップされた位置に留まるようにするにはどうすればよいでしょうか?

    function allowDrop(ev) {
        ev.preventDefault();
    }
    
    function drag(ev) {
        ev.dataTransfer.setData("text/html", ev.target.id);
    }
    
    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text/html");
        ev.target.appendChild(document.getElementById(data));
         //window.alert( ev.clientX + ',' + ev.clientY);
        document.getElementById("drag1").style.left = ev.clientX + 'px';
        document.getElementById("drag1").style.top = ev.clientY + 'px';
        return false;
    }
    #div1 {width:350px;height:170px;padding:10px;border:1px solid #aaaaaa;}
    #drag1 {width:50px;height:50px;padding:10px;border:1px solid #000;background-color: #f00; position: absolute;}
    
    
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div id="drag1" draggable="true" ondragstart="drag(event)"></div>
    </div>

4

1 に答える 1

5

divの左上隅をマウスの位置にドロップしています。マウスが実際にドラッグしているdiv内からのオフセットを見つける必要があります。イベントオブジェクトを（クロムで）チェックすることにより、offsetXおよびoffsetYおよびlayerXおよびlayerYには、divの原点からマウスまでのオフセットがあるようです。

これは、FirefoxのoffsetXY と layerXY および関連するプロパティ event.offsetX に関する多くの議論を伴う質問です。注: 受け入れられた回答を読むだけではいけません。

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

function drag(ev) {
    ev.dataTransfer.setData("application/json", 
    JSON.stringify([ev.target.id, 
        (ev.offsetX || ev.clientX - $(ev.target).offset().left),
        (ev.offsetY || ev.clientY - $(ev.target).offset().top)]
    ));
}
    
function drop(ev) {
    ev.preventDefault();
    var data = JSON.parse(ev.dataTransfer.getData("application/json"));
    ev.target.appendChild(document.getElementById(data[0]));
    //window.alert( ev.clientX + ',' + ev.clientY);
    document.getElementById("drag1")
        .style.left = ev.clientX - data[1] + 'px';
        document.getElementById("drag1").style.top = ev.clientY - data[2] + 'px';
    return false;
}
#div1 { width:350px; height:170px; padding:10px; border:1px solid #aaaaaa; }
#drag1 { width:50px; height:50px; padding:10px; border:1px solid #000; background-color: #f00; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div id="drag1" draggable="true" ondragstart="drag(event)"></div>
</div>

于 2014-10-31T22:20:31.033 に答える