JavaScript拖放图像

到目前为止，我所拥有的是右侧有一组徽标，当您将其拖动到左侧时，会弹出另一张图像，该图像是该网站的屏幕截图。JavaScript拖放图像

我需要帮助的是，当我把它拖到左边并且屏幕截图出现时，我会喜欢屏幕截图下方出现。

该网站的链接，该网站的名称，以及该网站的生物。

的Index.html

<link rel="stylesheet" type="text/css" href="drag.css" /> 
<title>Drag and Drop</title> 
</head> 

<body> 
    <div id="dragTo" class="dragToArea"><img id="largeImage" /><div id="textual" class="textual"></div></div> 
    <div id="dragFrom" class="dragFromArea"></div> 
</body> 


<script src="drag.js"></script> 
</html>

JavaScript文件

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

来源

2012-12-14 Juan Ortiz

为什么你不只是在if(isInRightSpot){部分的东西，检查其图像被拖动，然后添加代码添加适当的信息？

来源

2012-12-14 21:09:40 qw3n

JavaScript拖放图像

回答

相关问题