Home/ Questions/Q 6996311
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T20:08:23+00:00

I’m new to Raphael as well as to JS.. I need to be able

  • 0

I’m new to Raphael as well as to JS.. I need to be able to drag the Canvas itself, not the object in it, to various locations on the screen. I looked everywhere on the web and can’t find a clue. Of course, the user would have to try and grab the canvas at some free spot … free from child objects…

Any clue would be greatly appreciated.

Here is how I constructed the Canvas on this site:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Raphael Play</title>
    <script type="text/javascript" src="js/raphael.js"></script>
    <script type="text/javascript" src="js/mood.js"></script>
    <style type="text/css">  
            #canvas_container {  
            position:absolute;
                width: 803;  
            left:200px; 
            top:100px;
            border: 0px solid #555;  
            -webkit-box-shadow: 0px 0px 84px #999; 
            -moz-box-shadow: 0px 0px 84px #999; 
            box-shadow: 0px 0px 84px #000; 
            border-radius: 20px 20px 20px 20px;
            background-color:#fff;
            background-image:url(static/VAZZZ.png);
            }  
     </style>
  </head>
  <body>
      <div id="canvas_container" ></div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a cross-browser drag function and event listener for the <div>.

    http://jsfiddle.net/MtbJe/

    • Your CSS was incomplete (no height specified and width was missing “px”).
    • The box-shadow significantly reduces the smoothness of the dragging, you may actually want to use an image in this instance (remove the box-shadow to see how much smoother it is).

    • If you want to make something else in the UI be the actual drag handler (but still move the entire <div>) you will have to change the event listener to be for that element and change the 15th line of the JavaScript from:

      var dragObj = e.target ? e.target : e.srcElement;

      to something like:

      var dragObj = e.target ? e.target.parentNode : e.srcElement.parentNode;

    I’ve had this code saved for many years and I believe the original author is http://www.quirksmode.org/ though I don’t see it there anymore. You will find a lot of great information about JS on this site. Again, this is a cross-browser script which I’m not sure you need given you are using canvas. If you are very new to JS and working with the DOM, then I’m sure the code will look a bit confusing and I encourage you to ask additional questions.

    • 0