javascript - HTML/JavaScript 拖放但在拖动过程中更改文本？

Question

我创建了一个简单的 html 网页。用户需要选择像 1.23 这样的文本，然后将其拖放到另一个浏览器中。一切都很完美。(我不需要编写任何代码来让它工作。我认为这都是浏览器内置功能的一部分。)

我需要将该数字四舍五入为 1.5。我可以毫不费力地四舍五入，但是如何在拖动过程中 捕获(并更改)值？我不想更改第一个浏览器中的值，它需要保持为 1.23...我只需要在拖动开始和放下之间进行舍入，进入第二个浏览器窗口。

可以吗？我会发布一些代码，但就像我说的那样，这一切都不需要任何代码......除了“改变 while 拖动部分”。

我宁愿编写自己的代码，也不会仅仅为了这 1 个小功能而拖入 jquery 等大量代码库。

Answer 1

也许您可以尝试在浏览器启动时更改浏览器中的文本，并在您删除它后将其恢复原状？尝试这样的事情:

https://jsfiddle.net/Domination/4zejjygk/1/

HTML:

<div id="dragEl" draggable='true'>1.5343</div>

JS:

//This is the element
dragItem = document.getElementById("dragEl");

//This is the event that changes it when mouse is over
dragItem.addEventListener("mouseover", HandleStart);

//These are events that change it back when the dragging is finished
dragItem.addEventListener("mouseout", HandleEnd);
dragItem.addEventListener("dragend", HandleEnd);
temp = dragItem.innerHTML;

//This is launched when it is hovered over
function HandleStart(e){
    e.preventDefault();
    text = e.target.innerHTML
    rounded = Math.round(Number(text)*10)/10; //Rounds the number to two decimal places
    e.target.innerHTML = rounded; 
}

//This is launched when dragging has finished
function HandleEnd(e) {
    e.preventDefault();
    e.target.innerHTML = temp; //Reverts to original
}

如果您有权访问要将其拖动到的其他页面，则可以按照 Ivan 的建议进行操作，并在要将其拖放到的部分上使用 ondrop 事件...

https://jsfiddle.net/Domination/tgy7xgvx/1/