Home/ Questions/Q 8209843
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T09:52:09+00:00

I am new with HTML5. I have to implement such a functionality that I

  • 0

I am new with HTML5.
I have to implement such a functionality that I want images to be dropped within a canvas from outside, then there are visible boundaries within canvas and the images can be moved from one boundary to another. It is the same as in the following link,
http://custom.case-mate.com/diy?bypassLandingPage=true

As, in the site, user selects the pattern and drags images into that. Then he can drag the images between the boundaries. please give some solution for implementing such a functionality.

Here is what I have tried,

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {position:relative;
        left:150%;
        border: 10px solid #9C9898;
        background-color: grey;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 300,
          height: 400,
        });

        var layer = new Kinetic.Layer();

        var redLine = new Kinetic.Line({
          points: [150, 0, 150, 400],
          stroke: "white",
          strokeWidth: 2,
        });

        var blueLine = new Kinetic.Line({
          points: [150, 0, 150, 120, 300, 120],
          stroke: "white",
          strokeWidth: 2,
        });

        var thirdLine = new Kinetic.Line({
          points: [300, 120, 150, 120, 150, 400],
          stroke: "white",
          strokeWidth: 2,
        });

        var imageObj = new Image();
        imageObj.onload = function() {
          var image = new Kinetic.Image({
            x: stage.getWidth() / 2 - 50,
            y: stage.getHeight() / 2 - 60,
            image: imageObj,
            width: 100,
            height: 120,

          }); 
           image.draggable(true);   
          layer.add(image);

          // add the layer to the stage
          stage.add(layer);
        };
        imageObj.src = "images/212.png";
        layer.add(redLine);
        layer.add(blueLine);
        layer.add(thirdLine);
        stage.add(layer);
};

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a nice tutorial on HTML5 native drag’n’drop:
    http://www.html5rocks.com/en/tutorials/dnd/basics/

    Basically you can declare an item as draggable in HTML5 with the draggable attribute

    <div class="draggable" draggable="true">A</div>
<div class="draggable" draggable="true">B</div>

    …and then use Javascript to handle some events like:

    var items = document.querySelectorAll('.draggable');
[].forEach.call(items, function(item) {
  item.addEventListener('dragstart', function(){ /*handle drag start*/ }, false);
  item.addEventListener('dragenter', function(){ /*handle drag enter*/ }, false)
  item.addEventListener('dragover',  function(){ /*handle drag over*/ }, false);
  item.addEventListener('dragleave', function(){ /*handle drag leave*/ }, false);
  item.addEventListener('drop',      function(){ /*handle drop*/ }, false);
  item.addEventListener('dragend',   function(){ /*handle drag end*/ }, false);
});
    • 0