在javascript中拖放时调整图像大小

Question

我们正在努力使学校项目像在线交付系统..但它会有一些调整，如拖放系统和食品定制。就像当你把酱汁拖到主要图像，这是一碗米饭。它会自动将图像更改为米饭酱。像蛋白质蔬菜一样健全。

我正在试图弄清楚如何更改图像或将其用于主图像，同时我也拖放它..在CSS中更改它的一些属性。

也许有一个功能，当我拖动一个特定的图像时，它会将主图像更改为不同的图像而不是拖动的图像。

private static void Hook_KeyPressed(object sender, KeyPressedEventArgs e)
{
    _hook.KeyPressed -= Hook_KeyPressed;
    _hook.Dispose();
    SendKeys.Send("^v");
    _hook = new KeyboardHook();
    _hook.RegisterHotKey(global::ClipMaster.ModifierKeys.Control, Keys.V);
    _hook.KeyPressed += Hook_KeyPressed;
}

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);

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

//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
	var code = '<img id="img1" src="images/image1.jpg">';
	e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
	var code = '<img id="img2" src="images/image2.jpg">';
	e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
	var code = '<img id="img2" src="images/image4.jpg">';
	e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
	var code = '<img id="img2" src="images/image5.jpg">';
	e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//

function dropped(e){
	e.preventDefault();
	leftbox.innerHTML = e.dataTransfer.getData('Text');
	var code = '<img id="centerimg" src="images/center.png">';
	ondrop

}
function drop(event){
	event.preventDefault();
	var code = '<img id="img2" src="images/image5.jpg" width="300px" height="300px">' ;
}
window.addEventListener ("load", doFirst, false);

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

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