Question

到目前为止，我在右侧有一组徽标，当您将其向左拖动到一个框中时，会弹出另一个图像，这是该网站的屏幕截图。

我需要帮助的是，当我将它向左拖动并且屏幕截图显示时，我会像下面的屏幕截图一样显示。

该网站的链接，网站的名称，这是一个网站的生物。

的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

Answer 1

为什么不在if(isInRightSpot){部分添加代码来检查正在拖动哪个图像，然后添加相应的信息呢？

Javascript拖放图片

1 个答案: