正如您在下面的代码中看到的，我想将图片拖到id＆＃34; centerimg＆＃34;。我隐藏了几张图像，因为这些图像会采用中心图像。问题是它没有采用中心图像的大小。它需要拖动图像的大小。我试过通过DOM元素操纵它的CSS，唯一改变它的图像是拖动的初始图像。
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);
#centerimg {
width: 500px;
height: 500px;
}
#img2, #img1, #img3, #img4 {
width: 150px;
height: 150px;
}
#img5 {
visibility: hidden;
}
.changeimagesize {
height: 500px;
width: 500px;
}
<!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>
答案 0 :(得分：1)
可能的解决方案：在drop函数中强制使用新的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 {
width: 500px;
height: 500px;
}
#img2,
#img1,
#img3,
#img4 {
width: 150px;
height: 150px;
}
#img5 {
visibility: hidden;
}
.changeimagesize {
height: 500px;
width: 500px;
}<!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>