I have a javascript game that uses *drag and drop* of images to create words. Currently if the word has repeating letters, I have to name the letters differently:

```
Example word: Alphabet,
images: a.png, l.png, p.png, h.png, a1.png, b.png, e.png and t.png.

```

As you can imagine when you drag `a.png` to spell the word, it has to be on its own defined block or it wont lock in place.

How can i edit the script to use the same image more than once and be able to drag on any of the correct placements.

See this fiddle for a demo: <http://jsfiddle.net/Q89Ck/>

```
<script defer="defer">
  function loadImages(sources, callback) {
    var assetDir = 'http://kidnplay.co.uk/spelling/alphabet/';
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = assetDir + sources[src];
    }
  }
  function isNearOutline(animal, outline) {
    var a = animal;
    var o = outline;
    var ax = a.getX();
    var ay = a.getY();

    if(ax > o.x - 20 && ax < o.x + 20 && ay > o.y - 20 && ay < o.y + 20) {
      return true;
    }
    else {
      return false;
    }
  }
  function drawBackground(background, backImg, text) {
    var canvas = background.getCanvas();
    var context = background.getContext();

    context.drawImage(backImg, 0, 0);
    context.font = '18pt georgia,palatino';
    context.textAlign = 'center';
    context.fillStyle = 'white';
    context.fillText(text, background.getStage().getWidth() / 2, 32);
  }
  function initStage(images) {
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 940,
      height: 600
    });
    var background = new Kinetic.Layer();
    var animalLayer = new Kinetic.Layer();
    var animalShapes = [];
    var score = 0;

    // image positions
    var animals = {
      a: {
        x: 50,
        y: 70
      },
      e: {
        x: 150,
        y: 70
      },
      b: {
        x: 250,
        y: 70
      },
      t: {
        x: 350,
        y: 70
      },
      a2: {
        x: 450,
        y: 70
      },
      p: {
        x: 550,
        y: 70
      },
      l: {
        x: 650,
        y: 70
      },
      h: {
        x: 750,
        y: 70
      },
    };

    var outlines = {
      a_black: {
        x: 30,
        y: 300
      },
      l_black: {
        x: 135,
        y: 300
      },
      p_black: {
        x: 240,
        y: 300
      },
      h_black: {
        x: 345,
        y: 300
      },
      a2_black: {
        x: 450,
        y: 300
      },
      b_black: {
        x: 555,
        y: 300
      },
      e_black: {
        x: 660,
        y: 300
      },
      t_black: {
        x: 765,
        y: 300
      },
    };

    // create draggable animals
    for(var key in animals) {
      // anonymous function to induce scope
      (function() {
        var privKey = key;
        var anim = animals[key];

        var animal = new Kinetic.Image({
          image: images[key],
          x: anim.x,
          y: anim.y,
          draggable: true
        });

        animal.createImageHitRegion();

        animal.on('dragstart', function() {
          this.moveToTop();
          animalLayer.draw();
        });
        /*
         * check if animal is in the right spot and
         * snap into place if it is
         */
        animal.on('dragend', function() {
          var outline = outlines[privKey + '_black'];
          if(!animal.inRightPlace && isNearOutline(animal, outline)) {
            animal.setPosition(outline.x, outline.y);
            animalLayer.draw();
            animal.inRightPlace = true;

            if(++score >= 8) {
              var text = 'Well done! The correct word is alphabet!'
              drawBackground(background, images.back, text);
            }

            // disable drag and drop
            setTimeout(function() {
              animal.setDraggable(false);
            }, 50);
          }
        });
        // make animal glow on mouseover
        animal.on('mouseover', function() {
          animal.setImage(images[privKey + '_glow']);
          animalLayer.draw();
          document.body.style.cursor = 'pointer';
        });
        // return animal on mouseout
        animal.on('mouseout', function() {
          animal.setImage(images[privKey]);
          animalLayer.draw();
          document.body.style.cursor = 'default';
        });

        animal.on('dragmove', function() {
          document.body.style.cursor = 'pointer';
        });

        animalLayer.add(animal);
        animalShapes.push(animal);
      })();
    }

    // create animal outlines
    for(var key in outlines) {
      // anonymous function to induce scope
      (function() {
        var imageObj = images[key];
        var out = outlines[key];

        var outline = new Kinetic.Image({
          image: imageObj,
          x: out.x,
          y: out.y
        });

        animalLayer.add(outline);
      })();
    }

    stage.add(background);
    stage.add(animalLayer);

    drawBackground(background, images.back, 'Rearrange the letters to spell the word');
  }

  var sources = {
    back: 'back.png',
    a: 'a.png',
    a_glow: 'a-glow.png',
    a_black: 'a-black.png',
    b: 'b.png',
    b_glow: 'b-glow.png',
    b_black: 'b-black.png',
    e: 'e.png',
    e_glow: 'e-glow.png',
    e_black: 'e-black.png',        
    h: 'h.png',
    h_glow: 'h-glow.png',
    h_black: 'h-black.png',
    l: 'l.png',
    l_glow: 'l-glow.png',
    l_black: 'l-black.png', 
    p: 'p.png',
    p_glow: 'p-glow.png',
    p_black: 'p-black.png',
    t: 't.png',
    t_glow: 't-glow.png',
    t_black: 't-black.png',
    a2: 'a2.png',
    a2_glow: 'a2-glow.png',
    a2_black: 'a2-black.png',
  };
  loadImages(sources, initStage);

</script>

```