Перетаскивание изображений на HTML5 с сенсорным экраном

Question

У меня есть сценарий, который работает правильно, показывает изображение, и вы можете перетащить это изображение. Но моя проблема: как я могу добавить больше изображений? Если я копирую один и тот же код, он не отображает два изображения.

<script src="http://d3lp1msu2r81b...c-v5.0.2.min.js"></script> 
<script defer="defer"> 
    function drawImage(imageObj) { 
     var stage = new Kinetic.Stage({ 
      container: "container", 
      width: 800, 
      height: 600 
     }); 
     var layer = new Kinetic.Layer(); 

     // darth vader 
     var darthVaderImg = new Kinetic.Image({ 
      image: imageObj, 
      x: 100, 
      y: 30, 
      width: 40, 
      height: 40, 
      draggable: true 
     }); 

     // add cursor styling 
     darthVaderImg.on('mouseover', function() { 
      document.body.style.cursor = 'pointer'; 
     }); 
     darthVaderImg.on('mouseout', function() { 
      document.body.style.cursor = 'default'; 
     }); 

     layer.add(darthVaderImg); 
     stage.add(layer); 
    } 

    var imageObj = new Image(); 
    imageObj.onload = function() { 
     drawImage(this); 
    }; 
    imageObj.src = 'adorno1.png'; 
</script> 

Answer 1

function drawImage(imageObj) { 
    var stage = new Kinetic.Stage({ 
     container: "container", 
     width: 800, 
     height: 600 
    }); 
    var layer = new Kinetic.Layer(); 

    // darth vader 
    var darthVaderImg = new Kinetic.Image({ 
     image: imageObj, 
     x: 0, 
     y: 0, 
     width: 100, 
     height: 100, 
     draggable: true 
    }); 

      var darthVaderImg1 = new Kinetic.Image({ 
     image: imageObj1, 
     x: 100, 
     y: 100, 
     width:100, 
     height: 100, 
     draggable: true 
    }); 

    // add cursor styling 
    darthVaderImg.on('mouseover', function() { 
     document.body.style.cursor = 'pointer'; 
    }); 
    darthVaderImg.on('mouseout', function() { 
     document.body.style.cursor = 'default'; 
    }); 

    layer.add(darthVaderImg); 
    layer.add(darthVaderImg1); 
    stage.add(layer); 
} 


var imageObj = new Image();  

вар imageObj1 = новое изображение();

imageObj.onload = function() { 
    drawImage(this); 
     }; 

imageObj1.onload = function() { 
    drawImage(this); 
     }; 

imageObj.src = 'http://i.forbesimg.com/media/lists/companies/google_416x416.jpg'; imageObj1.src = 'http://i.forbesimg.com/media/lists/companies/google_416x416.jpg';

здесь является ответом на ваш вопрос http://jsfiddle.net/ajayholla/71qrotzz/5/