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

Question

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

我需要将这个数字四舍五入到 1.5。我在四舍五入时没有问题， 但是我如何才能在在拖动过程中捕捉（并更改）值？我不想更改第一个浏览器中的值，它需要保持为 1.23... 我只需要在拖放开始和拖放之间进行舍入 ，进入第二个浏览器窗口。

可以吗？我会发布一些代码，但是就像我说的那样，这一切都可以在没有任何代码的情况下工作......除了“更改同时拖动部分”。

我宁愿编写自己的代码，不仅仅为了这 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/