Drag and drop absolute positioned canvas element on page - Javascript Canvas

Javascript examples for Canvas:Mouse

  1. HOME
  2. Javascript
  3. Canvas
  4. Mouse

Description

Drag and drop absolute positioned canvas element on page

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script> 
      <style id="compiled-css" type="text/css">

#container {/*from  ww  w .  java 2  s  .  c o m*/
   position: absolute;
}
.thing {
   background: gray;
   border: 1px solid black;
   width: 100px;
   height: 50px;
   margin: 10px;
}
#canvas {
   position: absolute;
   top: 0;
   left: 0;
   border: 1px solid green;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
$(document).ready( function() {
    var container = $("#container");
    var canvas = $("#canvas")[0];

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    $("#add").click( function() {
        container.append('<div class="thing"></div>');
        container.children(".thing").last().draggable();
        canvas.height = $(document).height();
    });
    // THIS is not the right event to handle
    $(window).resize( function() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
   });
});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="canvas"></canvas> 
      <div id="container"> 
         <p>Click the 'Add' button a lot or drag any given box out of screen bounds and you will see that the green lines of the canvas do not resize.</p> 
         <button id="add">Add</button> 
      </div>  
   </body>
</html>

Related Tutorials