gpt4 book ai didi

javascript - HTML5 拖放,拖放的 div 从拖放位置移动了一点

转载 作者:行者123 更新时间:2023-11-30 10:11:02 24 4
gpt4 key购买 nike

我有以下工作代码 ( also see this fiddle ):

<!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>

最佳答案

您要将 div 的左上角放到鼠标所在的位置,您必须找到鼠标实际拖动的 div 内部的偏移量。通过检查事件对象(在 chrome 中),offsetXoffsetY 以及 layerXlayerY 似乎有偏移量从 div 的原点到鼠标。

这是一个关于 offsetXY 和 layerXY 以及相关属性的大量讨论的问题 event.offsetX in Firefox ,注意:不要只阅读已接受的答案。

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>

关于javascript - HTML5 拖放,拖放的 div 从拖放位置移动了一点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26657123/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com