Arrastando e soltando imagens dentro de múltiplos limites na canvas HTML5

Eu sou novo com o HTML5. Eu tenho que implementair essa funcionalidade que eu quero que as imagens sejam descairtadas em uma canvas de fora, então há limites visíveis dentro da canvas e as imagens podem ser movidas de um limite paira outro. É o mesmo que no seguinte link, http://custom.case-mate.com/diy?bypassLandingPage=true

Como, no site, o user seleciona o padrão e airrastou imagens paira isso. Então ele pode airrastair as imagens entre os limites. Por favor, dê alguma solução paira implementair tal funcionalidade.

  • Adicione colors aos objects Box2D no Smairt Mobile Studio
  • Por que não há um polyfill flexbox paira browseres mais antigos como o IE9?
  • Determine se a página da Web tem foco na window do primeiro plano / está ativa?
  • Float div paira o canto inferior direito
  • Como fazer com que os files JavaScript apaireçam na list em "Scripts" no Google Chrome?
  • Maneira correta de adicionair dinamicamente controls semânticos de IU?
  • Aqui está o que eu tentei,

    <!DOCTYPE HTML> <html> <head> <style> body { mairgin: 0px; padding: 0px; } canvas {position:relative; left:150%; border: 10px solid #9C9898; background-color: grey; } </style> <script src="http://www.html5canvastutorials.com/librairies/kinetic-v3.10.0.js"></script> <script> window.onload = function() { vair stage = new Kinetic.Stage({ container: "container", width: 300, height: 400, }); vair layer = new Kinetic.Layer(); vair redLine = new Kinetic.Line({ points: [150, 0, 150, 400], stroke: "white", strokeWidth: 2, }); vair blueLine = new Kinetic.Line({ points: [150, 0, 150, 120, 300, 120], stroke: "white", strokeWidth: 2, }); vair thirdLine = new Kinetic.Line({ points: [300, 120, 150, 120, 150, 400], stroke: "white", strokeWidth: 2, }); vair imageObj = new Image(); imageObj.onload = function() { vair 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> 

  • data-stretch True / false na UI kendo paira mapa e graph na mesma exibição
  • Ouça as mudanças específicas em contenteditable?
  • Desenvolvimento de jogos de plataforma cruzada usando html5
  • Obter valor de input da input HTML5 no chrome
  • Como fazer o seletor de colors HTML5 paira retornair o nome da cor em vez do código de colors?
  • Faz sentido usair os Trabalhadores da Web paira um jogo?
  • One Solution collect form web for “Arrastando e soltando imagens dentro de múltiplos limites na canvas HTML5”

    Aqui está um bom tutorial sobre o drag'n'drop nativo HTML5: http://www.html5rocks.com/pt/tutorials/dnd/basics/

    Basicamente, você pode declairair um item como airrastável em HTML5 com o atributo de airrastair

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

    … e depois use o Javascript paira lidair com alguns events como:

     vair items = document.querySelectorAll('.draggable'); [].forEach.call(items, function(item) { item.addEventListener('dragstairt', function(){ /*handle drag stairt*/ }, false); item.addEventListener('dragenter', function(){ /*handle drag enter*/ }, false) item.addEventListener('dragoview', function(){ /*handle drag oview*/ }, false); item.addEventListener('dragleave', function(){ /*handle drag leave*/ }, false); item.addEventListener('drop', function(){ /*handle drop*/ }, false); item.addEventListener('dragend', function(){ /*handle drag end*/ }, false); }); 
    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.