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

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

javascript html css

Javascript 在HTML5画布中的多个边界内拖放图像,javascript,html,css,Javascript,Html,Css,我是HTML5新手。我必须实现这样一个功能，我希望图像从外部放置在画布中，然后画布中有可见的边界，图像可以从一个边界移动到另一个边界。与下面的链接相同，在站点中，用户选择模式并将图像拖动到该模式中。然后他可以在边界之间拖动图像。请给出一些实现这种功能的解决方案这是我尝试过的 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px;

我是HTML5新手。我必须实现这样一个功能，我希望图像从外部放置在画布中，然后画布中有可见的边界，图像可以从一个边界移动到另一个边界。与下面的链接相同，

在站点中，用户选择模式并将图像拖动到该模式中。然后他可以在边界之间拖动图像。请给出一些实现这种功能的解决方案

这是我尝试过的

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


身体{
边际：0px；
填充：0px；
}
画布{位置：相对；
左：150%；
边框：10px实心#9C9898；
背景颜色：灰色；
}
window.onload=函数（）{
var阶段=新的动力学阶段({
容器：“容器”，
宽度：300，
身高：400，
});
var layer=新的动能层（）；
var红线=新的动能线({
分数：[150,0,150,400]，
笔画：“白色”，
冲程宽度：2，
});
var blueLine=新的动能线({
分数：[150,0,150,120,300,120]，
笔画：“白色”，
冲程宽度：2，
});
var thirdLine=新的动力线({
分数：[300、120、150、120、150、400]，
笔画：“白色”，
冲程宽度：2，
});
var imageObj=新图像（）；
imageObj.onload=函数（）{
var image=新的动能图像({
x:stage.getWidth（）/2-50，
y:stage.getHeight（）/2-60，
图片：imageObj，
宽度：100，
身高：120，
}); 
图像。可拖动（真）；
图层。添加（图像）；
//将层添加到舞台
阶段。添加（层）；
};
imageObj.src=“images/212.png”；
图层。添加（红线）；
图层。添加（蓝线）；
图层。添加（第三行）；
阶段。添加（层）；
};

这里有一个关于HTML5本机拖放的不错的教程：

基本上，您可以使用draggable属性在HTML5中将项目声明为draggable

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

如果拖动的对象是链接（可能包含图像），则包含所需的所有内容。并不是说在大多数浏览器（不是IE）中，这也适用于任何类型的可拖动对象（不仅仅是链接）。请发布您迄今为止尝试过的代码，并描述您遇到的具体问题。我在画布上画了线，这些线可以用作图像拖动的边界。除了我尝试过的以外，我还想知道一些其他的想法。如果您对实现上述URL中的确切功能有任何想法，请提供帮助！我想从.but开始，我们现在不知道你尝试了什么，因为你还没有发布你的代码。我需要实现与上面给定的URL相同的功能。当用户选择图案时，它将显示在指定区域中。如图所示，您可以看到该图案包含用于拖放图像的分区。在调整这些边界内的图像后，我必须将指定区域保存为单个图像（如打印屏幕）。所以，我应该创建一个大div，并在选择时，使用具有指定模式的javascript在大div中创建新的小div！

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