Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Code to Drag and Drop an Image Anywhere on a Webpage

Most of us are familiar with HTML5's drag-and-drop standard. The problem is, it's designed to let you drag text or data from a textbox or table cell, to another textbox or table cell, which is great, but what if you want to drag an image, not to a target element, but to anywhere on a webpage. Then HTML5 drag-and-drop falls short.

For this example, I do not use HTML5's drag-and-drop. It requires only standard dynamic HTML. You should see a red ball on this page, and you should be able to drag that red ball to anywhere on the page. The first thing we need to do in order to accomplish that is put the image of the ball on its own layer. We do that by setting the ball's style to position:absolute as shown below.

<img id="redball" src="redball.png" width="32" height="32" style="position:absolute;" />

The next thing we need to do is define EventListener functions for mouse events like mousedown, mousemove, mouseout, and mouseup. We do that in a function named window_onload, as shown below.

function window_onload()
{
   redball = document.getElementById("redball");

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

This fuction first saves a reference to the redball element in a global variable, then it attaches the mouse events to functions named startDrag, drag, and stopDrag. When you press the mouse button while over the redball, the mouse down event executed the startDrag function, shown below, which saves the x and y locations of the mouse pointer, adjusted for the current position of the redball, to global variables. Then it sets a global dragging flag to true.

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

While you drag, the mousemove events execute the drag function, shown below, which simply updates the mouse pointer position.

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

When you release the mouse button, the mouseup event executes the stopDrag function, shown below, which updates the mouse pointer position, and then sets the dragging flag to true. The stopDrag is also called by the mouseout event, which occurs when the mouse pointer leaves the bounds of the redball image, because the user was trying to drag too fast.

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

The addEventListener method is not supported in Internet Explorer 8 and earlier versions. Google Chrome seems to have a messaging queue bug, as you have to move the mouse or click to get it to push through the mouseup message, at least on my machine. The best browser to use is Mozilla Firefox.

So, there you have it, simple non-html5 code to drag and drop an image anywhere on a webpage, which you can copy and paste from below.

<style>
html,body
{
height:100%;
}
</style>

<script type="text/javascript">

var redball = null;
var dragging = false;
var x;
var y;

function window_onload()
{
   redball = document.getElementById("redball");

   if(window.addEventListener)
   {
      redball.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 - redball.offsetLeft;
      y =  ev.clientY - redball.offsetTop;
      dragging = true;
   }
}

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

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

</script> 

</head>
<

<img id="redball" src="redball.png" width="32" height="32" style="position:absolute;" />

More Java Script Code:
• Date Picker For Your Web Site
• Easy Code for Animated Banner - Squeeze Text
• Java Script Trim Function
• Code to Add Music to Your Webpage
• Put Commas in Your Java Script Calculators
• Introduction to JavaScript Programming
• JavaScript to Set Checkbox to Readonly
• Create a Mouse Click Sound Effect
• Concatenating a String and Another Data Type
• Java Script Comparison Operators

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268