title: Javascript drag and drop image
body: <p>What I have so far is that on the right hand side there is a set of logos and when you drag it to the left into a box, another image pops out which is a screenshot to the site.</p>
  
  <p>What i need help on is that when i drag it to the left and the screenshot appears i woould like that below the screenshot appears. </p>
  
  <p>The link to the site,
  The name of the site,
  And a bio of what the site is.</p>
  
  <p>Index.html<br>
   
      
      
      </p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="drag.css" /&gt;
  &lt;title&gt;Drag and Drop&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="dragTo" class="dragToArea"&gt;&lt;img id="largeImage" /&gt;&lt;div id="textual" class="textual"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div id="dragFrom" class="dragFromArea"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  
  &lt;script src="drag.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript file</p>
  
  <pre><code>var Resource = function(thumb,textual){ // Creates a prototype of Resource
      var self = this; // Declares variable self as this( refers to the "Owner" of the function being executed )
      self.thumbImage= document.createElement('img'); // Creates an image tag within dragFrom div
      self.thumbImage.setAttribute('src',thumb); // Sets source of image tag to the called upon variable thumb
      self.thumbImage.setAttribute('class','draggable'); // Creates a class on the image called draggable
      document.getElementById('dragFrom').appendChild(self.thumbImage); // Displays the image with set attributes listed above
      self.thumbImage.setAttribute('id', thumb.slice(12,13))
  
  
          self.textual = textual;
  
      whichicon=thumb.slice(12,13);
  
      self.dragStartHandler = function(e){
          e.target.style.opacity='0.4'; // Sets the opacity of the draggable image when dragging starts
  
      };
  
      self.dragEndHandler = function(e){
          if(isInRightSpot){ // Checks to see if isInRightSpot = true
              e.target.style.opacity='1'; // Resets opacity if isInRightSpot = true
              document.getElementById('largeImage').setAttribute('src', 'images/big' +e.target.id + '.png'); // Sets image tag in dragTo to images/big.png if isInRightSpot = true
                          document.getElementById('textual').innerHTML =  e.target.textual;
          }else{
              e.target.style.opacity='1'; // Resets opacity if isInRightSpot = false
  
          }
      };
  
      self.thumbImage.addEventListener('dragstart',self.dragStartHandler); // Adds an event listener for the start of dragging of the image in dragFrom
      self.thumbImage.addEventListener('dragend',self.dragEndHandler); // Adds an event listener for the end of dragging(releasing the image) of the image in dragFrom
  }
  
  var isInRightSpot = false; // Declares variable isInRightSpot and sets defualt value of false
  
  var dragToSpot = document.getElementById('dragTo'); // Sets dragToSpot to target the dragTo div
  
  dragToSpot.addEventListener('dragover',draggedOver); // Adds event listener for dragging over
  function draggedOver(){
      dragToSpot.style.border = "2px dotted"; // Sets border style of dragTo div
      dragToSpot.style.opacity = "0.7"; // Sets opacity of background of dragTo div
      isInRightSpot = true; // Sets the value of isInRightSpot so that draged image can be dropped
  };
  
  dragToSpot.addEventListener('dragleave',draggedOut);// Adds event listener for dragging out
  function draggedOut(){
      dragToSpot.style.border = "2px solid #777777"; // Resets border style of dragTo div
      dragToSpot.style.opacity = "1"; // Resets opacity of background of dragTo div
      if (mousedown){                 // ------------------------------------------------------------------------------
          isInRightSpot = false;      // Sets isInRightSPot to false only when the mouse button is in the down position
      }                               // ------------------------------------------------------------------------------
  };
  
  var smashingMag =  new Resource('images/thumb1.png','test');
  var smashingMag1 = new Resource('images/thumb2.png','22222222222');
  var smashingMag2 = new Resource('images/thumb3.png','3333333333333');
  var smashingMag3 = new Resource('images/thumb4.png','444444444'); // Creates a variable of smashingMag and sets Resource's thumb to images/thumb.png
  </code></pre>