Drag и drop в Explorer

Вопрос-ответ JavaScript
1

Первый должен перемещаться в первый куб желтый, второй во второй розовый.
Подскажите , что нужно сделать, чтобы код работал в Internet Explorer.
Можно ли как-то сократить код.

<meta charset=utf-8 >
<style>
#div1,#div2 {
    width:100px;
    height:50px;
    padding:10px;
	background-color:yellow;
	    display: inline-table;
		font-size:2rem;
}
#div2 {
background-color:pink;
}
</style>
<div id="div1" ondrop="drag1(event)" ondragover="allowDrop(event)">
    <div id="box1" draggable="true" ondragstart="drag1(event)" >первый
	</div>
</div>
<div id="div2" ondrop="drag2(event)" ondragover="allowDrop(event)">
    <span id="box2" draggable="true"  ondragstart="drag2(event)">второй
	</span>
</div>
<div id="div1" class="drag1" ondrop="drop1(event)" ondragover="allowDrop(event)">I
</div>
<div id="div2" class="drag2" ondrop="drop2(event)" ondragover="allowDrop(event)">II
</div>
<script>
function allowDrop(allowdropevent) {
    allowdropevent.target.style.color = 'blue';
    allowdropevent.preventDefault();
}
function drag1(dragevent) {
    dragevent.dataTransfer.setData("text1", dragevent.target.id);
}
function drag2(dragevent) {
    dragevent.dataTransfer.setData("text2", dragevent.target.id);
}
function drop1(dropevent) {
    dropevent.preventDefault();
    var data1 = dropevent.dataTransfer.getData("text1");
	var data2 = dropevent.dataTransfer.getData("text2");
if ((dropevent.dataTransfer.getData("text1"))&& (event.target.className == "drag1"))
	{dropevent.target.appendChild(document.getElementById(data1));
}}
function drop2(dropevent) {
    dropevent.preventDefault();
    var data1 = dropevent.dataTransfer.getData("text");
	 var data2 = dropevent.dataTransfer.getData("text2");
if ((dropevent.dataTransfer.getData("text2"))&& (event.target.className == "drag2"))
	{dropevent.target.appendChild(document.getElementById(data2));
}}
</script>