Geek Answers Handbook

Drag and drop images at multiple borders in HTML5 canvas

I am new to HTML5. I have to implement such functionality that I want the images to be deleted inside the canvas from the outside, then there are visible borders inside the canvas, and the images can move from one border to another. This is the same as the following link, http://custom.case-mate.com/diy?bypassLandingPage=true

Since the user selects a template on the site and drags images into it. Then it can drag and drop images between borders. please give some solution to implement such functionality.

Here is what I 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>
+4
source share
1 answer

Here is a good tutorial on native drag'n'drop HTML5: http://www.html5rocks.com/en/tutorials/dnd/basics/

Basically, you can declare an item as drag-and-drop in HTML5 using a drag-and-drop attribute

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

... and then use Javascript to handle some events, such as:

 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
source

More articles:


All Articles