JavaScript在丢弃时采用图像大小

正如您在下面的代码中看到的，我想将图像拖到id“centerimg”。我已经隐藏了几张图片，因为那些图片会采用中央图片。问题是它没有采用中心图像的大小。它需要拖动图像的大小。我试图通过DOM元素来操作它的CSS，并且改变它的大小的唯一图像是被拖动的初始图像。JavaScript在丢弃时采用图像大小

function doFirst() { 
 
    mypic = document.getElementById('img1'); 
 
    mypic.addEventListener("dragstart", startDrag, false); 
 

 
    mypictwo = document.getElementById('img2'); 
 
    mypictwo.addEventListener("dragstart", startDrag2, false); 
 

 
    mypicthree = document.getElementById('img3'); 
 
    mypicthree.addEventListener("dragstart", startDrag3, false); 
 

 
    mypicfour = document.getElementById('img4'); 
 
    mypicfour.addEventListener("dragstart", startDrag4, false); 
 

 
    centerbox = document.getElementById("mainbox"); 
 
    centerbox.addEventListener("dragenter", function(e) { 
 
    e.preventDefault(); 
 
    }, false); 
 
    centerbox.addEventListener("dragover", function(e) { 
 
    e.preventDefault(); 
 
    }, false); 
 
    centerbox.addEventListener("drop", dropped, false); 
 
} 
 

 
//--------------startDrag FUNCTIONS -----------------------// 
 
function startDrag(e) { 
 
    var code = '<img id="img1" src="images/ph1.jpg">'; 
 
    e.dataTransfer.setData('Text', code); 
 
} 
 

 
function startDrag2(e) { 
 
    var code = '<img id="img2" src="images/ph2.jpg">'; 
 
    e.dataTransfer.setData('Text', code); 
 
} 
 

 
function startDrag3(e) { 
 
    var code = '<img id="img2" src="images/ph3.jpg">'; 
 
    e.dataTransfer.setData('Text', code); 
 
} 
 

 
function startDrag4(e) { 
 
    var code = '<img id="img2" src="images/ph4.jpg">'; 
 
    e.dataTransfer.setData('Text', code); 
 
    } 
 
    //--------------startDrag FUNCTIONS -----------------------// 
 

 
function dropped(e) { 
 
    e.preventDefault(); 
 
    centerbox.innerHTML = e.dataTransfer.getData('Text'); 
 
} 
 

 
function drop(event) { 
 

 
} 
 

 

 
window.addEventListener("load", doFirst, false);

\t 
 

 
#centerimg { 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 

 
#img2, #img1, #img3, #img4 { 
 
    width: 150px; 
 
    height: 150px; 
 
} 
 

 
#img5 { 
 
    visibility: hidden; 
 
} 
 

 
.changeimagesize { 
 
    height: 500px; 
 
    width: 500px; 
 
} 
 

 
\t

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
 
    <script src="drag.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-3" id="1box"> 
 
     <img id="img1" src="images/image1.jpg"> 
 
     </div> 
 
     <div class="col-md-3" id="2box"> 
 
     <img id="img2" src="images/image2.jpg"> 
 
     </div> 
 
     <div class="col-md-3" id="3box"> 
 
     <img id="img3" src="images/image4.jpg"> 
 
     </div> 
 
     <div class="col-md-3" id="4box"> 
 
     <img id="img4" src="images/image5.jpg"> 
 
     </div> 
 

 

 

 

 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <center> 
 
     <div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox"> 
 
     <img id="centerimg" src="images/center.png"> 
 
     </div> 
 
    </center> 
 
    </div> 
 

 
    <!-- hidden images here--> 
 
    <img id="img5" class="img5" src="images/ph1.jpg"> 
 
    <img id="img5" class="img5" src="images/ph2.jpg"> 
 
    <img id="img5" class="img5" src="images/ph3.jpg"> 
 
    <img id="img5" class="img5" src="images/ph4.jpg"> 
 
    <img id="img5" class="img5" src="images/ph5.jpg"> 
 
    <!--end of hidden images--> 
 
</body> 
 

 
</html>

来源

2016-03-06 Redondo Velasco

可能的解决办法：在下降功能力新img标签来获取500px的宽度和高度。在这个解决方案中，我将宽度和高度硬编码，但我认为也有可能解决这个问题。

function doFirst() { 
 
    mypic = document.getElementById('img1'); 
 
    mypic.addEventListener("dragstart", startDrag, false); 
 

 
    mypictwo = document.getElementById('img2'); 
 
    mypictwo.addEventListener("dragstart", startDrag2, false); 
 

 
    mypicthree = document.getElementById('img3'); 
 
    mypicthree.addEventListener("dragstart", startDrag3, false); 
 

 
    mypicfour = document.getElementById('img4'); 
 
    mypicfour.addEventListener("dragstart", startDrag4, false); 
 

 
    centerbox = document.getElementById("mainbox"); 
 
    centerbox.addEventListener("dragenter", function(e) { 
 
    e.preventDefault(); 
 
    }, false); 
 
    centerbox.addEventListener("dragover", function(e) { 
 
    e.preventDefault(); 
 
    }, false); 
 
    centerbox.addEventListener("drop", dropped, false); 
 
} 
 

 
//--------------startDrag FUNCTIONS -----------------------// 
 
function startDrag(e) { 
 
    var code = '<img id="img1" src="images/ph1.jpg">'; 
 
    e.dataTransfer.setData('Text', code); 
 
} 
 

 
function startDrag2(e) { 
 
    var code = '<img id="img2" src="images/ph2.jpg">'; 
 
    e.dataTransfer.setData('Text', code); 
 
} 
 

 
function startDrag3(e) { 
 
    var code = '<img id="img2" src="images/ph3.jpg">'; 
 
    e.dataTransfer.setData('Text', code); 
 
} 
 

 
function startDrag4(e) { 
 
    var code = '<img id="img2" src="images/ph4.jpg">'; 
 
    e.dataTransfer.setData('Text', code); 
 
    } 
 
    //--------------startDrag FUNCTIONS -----------------------// 
 

 
function dropped(e) { 
 
    e.preventDefault(); 
 
    centerbox.innerHTML = e.dataTransfer.getData('Text'); console.log(centerbox); 
 
    centerbox.getElementsByTagName("img")[0].style.width = "500px"; 
 
    centerbox.getElementsByTagName("img")[0].style.height = "500px"; 
 
} 
 

 
function drop(event) { 
 

 
} 
 

 

 
window.addEventListener("load", doFirst, false);

#centerimg { 
 

 
\t width: 500px; 
 

 
\t height: 500px; 
 

 
\t } 
 

 
\t #img2, 
 

 
\t #img1, 
 

 
\t #img3, 
 

 
\t #img4 { 
 

 
\t width: 150px; 
 

 
\t height: 150px; 
 

 
\t } 
 

 
\t #img5 { 
 

 
\t visibility: hidden; 
 

 
\t } 
 

 
\t .changeimagesize { 
 

 
\t height: 500px; 
 

 
\t width: 500px; 
 

 
\t }

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
 
    <script src="drag.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-3" id="1box"> 
 
     <img id="img1" src="images/image1.jpg"> 
 
     </div> 
 
     <div class="col-md-3" id="2box"> 
 
     <img id="img2" src="images/image2.jpg"> 
 
     </div> 
 
     <div class="col-md-3" id="3box"> 
 
     <img id="img3" src="images/image4.jpg"> 
 
     </div> 
 
     <div class="col-md-3" id="4box"> 
 
     <img id="img4" src="images/image5.jpg"> 
 
     </div> 
 

 

 

 

 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <center> 
 
     <div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox"> 
 
     <img id="centerimg" src="images/center.png"> 
 
     </div> 
 
    </center> 
 
    </div> 
 

 
    <!-- hidden images here--> 
 
    <img id="img5" class="img5" src="images/ph1.jpg"> 
 
    <img id="img5" class="img5" src="images/ph2.jpg"> 
 
    <img id="img5" class="img5" src="images/ph3.jpg"> 
 
    <img id="img5" class="img5" src="images/ph4.jpg"> 
 
    <img id="img5" class="img5" src="images/ph5.jpg"> 
 
    <!--end of hidden images--> 
 
</body> 
 

 
</html>

来源

2016-03-06 13:53:29 silviagreen

非常感谢你，这是非常有帮助的队友！ –

JavaScript在丢弃时采用图像大小

回答

相关问题