2

I've created a simple html webpage. Users need to select text like 1.23, and drag/drop it into another browser. That all works perfectly. (I didn't need to write ANY code in order to get that to work. I assume that's all part of the browser's built-in features.)

I need to round off that number to 1.5. I have NO trouble doing the rounding, but how can I catch (and change) the value during the dragging? I don't want to change the value in the first browser, it needs to stay as 1.23... I only need to do the rounding between the drag-start and the dropping, into the 2nd browser window.

Can that be done? I would post some code, but like I said this all works without any code... except for the "change while dragging part".

I'd rather write my own code and not drag in massive code libraries like jquery just for this 1 tiny feature.

CuriousMinds123
  • 21
  • 1
  • 3
  • You can do that [**when copying the text**](http://stackoverflow.com/a/4777746/1913729) (`Ctrl + C` or right click & copy), but I don't know if you can do it on drag. Can you not do it in the receiving window? When the data is pasted, process it? – blex Jul 17 '15 at 12:42
  • Can you not use the javascript .hover() function, and then see if the item is not in the original position while it is moving? – Austin Collins Jul 17 '15 at 12:43
  • "I only need to do the round after the dropping" - Have you tried to use `onDrop` event: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drop – Ivan Jovović Jul 17 '15 at 12:51

1 Answers1

1

Maybe you could try changing the text in the browser when it starts and reverting it back after you've dropped it? Try something like this:

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
}

If you have access to the other page you are dragging it to, you could do as Ivan suggested and use the ondrop event on the section you are dropping it on...

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

Dom Slee
  • 611
  • 1
  • 5
  • 10
  • Unfortunately, I don't have access to the "destination page". Imagine dropping something into google.com. – CuriousMinds123 Jul 18 '15 at 02:17
  • I couldn't get the jsfiddle to work. I couldn't select the 1.512345... and when it jumps down to 1.5 I also couldn't select it. I'd rather not change the text that appears to the user... only change it sometime between the "drag" and the "drop". – CuriousMinds123 Jul 18 '15 at 02:20
  • This fiddle here changes the value of the text when dropped, using dataTransfer.setData: https://jsfiddle.net/Domination/n82ubLtn/ – Dom Slee Jul 18 '15 at 08:59
  • these are coming up 404 – OMNIA Design and Marketing Apr 06 '19 at 02:38
  • Oops - I changed my jsfiddle username from Domination to domslee, which broke all the links. The links still work if you change the username – Dom Slee Apr 10 '19 at 00:40