Question

我是HTML5的新手。我必须实现这样一种功能，我希望从外部将图像放在画布中，然后在画布中有可见的边界，图像可以从一个边界移动到另一个边界。它与以下链接相同， http://custom.case-mate.com/diy?bypassLandingPage=true

因为，在网站中，用户选择模式并将图像拖入其中。然后他可以在边界之间拖动图像。请为实现这样的功能提供一些解决方案。

这是我尝试过的，

<!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>

Answer 1

这是关于HTML5原生drag'n'drop的一个很好的教程： http://www.html5rocks.com/en/tutorials/dnd/basics/

基本上，您可以使用draggable属性

在HTML5中将项目声明为可拖动

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

...然后使用Javascript处理一些事件，如：

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);
});

在HTML5画布中的多个边界内拖放图像

1 个答案: