Jump to content

Drag&Drop image anywhere on screen ?


vmars316

Recommended Posts

Hello TIA ,

I am having probs with 'Drag&Drop image anywhere on screen ' .

I want to drop one image on top of another image . 

The page example is here https://vmars.us/ShowMe/DragDropAnyWhere-FORUM.html 

What am I not doing .  Should I be using layers ?   Here is my code:

<!DOCTYPE HTML>
<html>
<head>
<style>
html,body
{
height:100%;
}
div 
{
height:100%;
border-style: double;

}
</style>

<script type="text/javascript">

var OneBall-Charcol = null;
var dragging = false;
var x;
var y;

function window_onload()
{
   OneBall-Charcol = document.getElementById("OneBall-Charcol");

   if(window.addEventListener)
   {
      OneBall-Charcol.addEventListener('mousedown', startDrag);
      document.body.addEventListener('mousemove', drag);
      document.addEventListener('mouseout', stopDrag);
      document.body.addEventListener('mouseup', stopDrag);
   }
}

function startDrag(ev)
{
   if(!dragging)
   {
      x = ev.clientX - OneBall-Charcol.offsetLeft;
      y =  ev.clientY - OneBall-Charcol.offsetTop;
      dragging = true;
   }
}

function drag(ev)
{
   if(dragging)
   {
      OneBall-Charcol.style.left = ev.clientX - x + "px";
      OneBall-Charcol.style.top = ev.clientY - y + "px";
   }
}

function stopDrag(ev)
{
   if(dragging)
   {
      OneBall-Charcol.style.left = ev.clientX - x + "px";
      OneBall-Charcol.style.top = ev.clientY - y + "px";
      dragging = false;
   }
}

</script> 

<body onload="window_onload()">
<div>
<img id="OneBall-Charcol" src="OneBall-Charcol.png" width="32" height="32"  draggable="true">
<br><br>
<img id="3-ScaleBoxes-Charcol" src="3-ScaleBoxes-Charcol.png" width="600" height="197"  >

</div>

</body>
</html>

 

Edited by vmars316
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...