javascript - Dragging and dropping images within multiple boundries in HTML5 canvas -

I am new to HTML5, I have to implement such a functionality which I have to leave images in the canvas outside , Then there are limitations in the canvas and the images can be moved from one border to the other. This is similar to the following link,

As, in the site, the user selects the pattern and Leaves images in it, then draw pictures between the boundaries Awareness is just a few solutions to implement such functionality

Here's what I've tried,

  & lt ;! DOCTYPE HTML & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Style & gt; Body {margin: 0 px; Padding: 0 pixels; } Canvas {status: relative; Left: 150%; Limit: 10px solid # 9C9898; Background color: gray; } & Lt; / Style & gt; & Lt; Script src = "http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js" & gt; & Lt; / Script & gt; & Lt; Script & gt; Window.onload = function () {var platform = new kinetic.stage ({container: "container", width: 300, height: 400,}); Var layer = new kinetic Layers (); Var redline = new kinetic Line ({digits: [150, 0, 150, 400], stroke: "white", stroke width: 2,}); Var Blueline = New Kinetic Line ({digits: [150, 0, 150, 120, 300, 120], stroke: "white", stroke width: 2,}); Var third line = new kinetic Line ({digits: [300, 120, 150, 120, 150, 400], stroke: "white", stroke width: 2,}); Var imageObj = new image (); ImageObj.onload = function () {var image = New kinetic Picture ({x: phase .getWidth () / 2 - 50, y: stage.getHeight () / 2 - 60, image: imageObj, width: 100, height: 120,}); Image.draggable (true); Layer.add (image); // Add at the stage level. Add (layer); }; ImageObj.src = "picture / 212.png"; Layer.add (redline); Layer.add (blue line); Layer.add (thirdLine); Stage.add (layer); }; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "container" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt; Here is a good tutorial on HTML5 native drag drags:  
 
 Actually you dragable attribute  
  & lt; Div class = "draggable" draggable = "true" & gt; A & lt; / Div & gt; With a draggable in HTML5 can declare an item as. & Lt; Div class = "draggable" draggable = "true" & gt; B & lt; / Div & gt; Use javascript to handle   
 ... and then like some events:  
  var items = document.querySelectorAll ('draggable') ; [] ForEach.call (item, function (item) {item.addEventListener ('draggart', function) (/ / handle drag start * /}, incorrect); Item.addEventListener ('dragenter', function) / * Enter the handle drag * /}, false) item.addEventListener ('drawerover', function) (/) * /; * Drag the drag on;); Item.addEventListener ('dragleave', function ()) {/ * handle item.addEventListener ('drop', function) () / / handle drop * false); Item.addEventListener ('dragend', function) {/ * handle drag end *}, false); });