Javascript-форум - Drag and drop in Internet Explorer

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Drag and drop in Internet Explorer (https://javascript.ru/forum/dom-window/81818-drag-drop-internet-explorer.html)

Drag and drop in Internet Explorer

Как сделать, чтобы код работал в Internet Explorer?
В других браузерах работает.
Можно ли как то сократить код?

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

Элементы должны иметь уникальные id.
Иначе браузер не всегда понимает, какой из них надо брать.
Для начала исправьте это.

Цитата:

Сообщение от rita

Как сделать, чтобы код работал в Internet Explorer?

искать полифил для setData, если такой есть конечно.

Цитата:

Сообщение от рони

искать полифил для setData, если такой есть конечно.

Мне кажется, что в ИЕ 10-11 dataTransfer.setData есть.
Но ограничивается только текстом. И задавать надо так
dataTransfer.setData("text", "строка")

Проверить не могу, ИЕ нет.

Цитата:

Сообщение от voraa

Мне кажется, что в ИЕ 10-11 dataTransfer.setData есть.

метод есть, но похоже не рабочий.
https://developer.mozilla.org/en-US/..._compatibility

Нашел какой то ИЕ (выглядит как ИЕ, но не говорит, какой он)
По крайней мере всякие модули ES-6 он не понимает.
В нем это работает

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
#div1,#div2, #div11, #div22 {
    width:100px;
    height:50px;
    padding:10px;
    background-color:yellow;
        display: inline-table;
        font-size:2rem;
}
#div2 {
background-color:pink;
}
</style>
</head>

<body id="body"  >

<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="div11" class="drag1" ondrop="drop1(event)" ondragover="allowDrop(event)">I
</div>
<div id="div22" 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("text", dragevent.target.id);
}
function drag2(dragevent) {
    dragevent.dataTransfer.setData("text", dragevent.target.id);
}
function drop1(dropevent) {
    dropevent.preventDefault();
    var data = dropevent.dataTransfer.getData("text");
if (data && event.target.className == "drag1")
    {dropevent.target.appendChild(document.getElementById(data));
}}
function drop2(dropevent) {
    dropevent.preventDefault();
     var data = dropevent.dataTransfer.getData("text");
if (data && event.target.className == "drag2")
    {dropevent.target.appendChild(document.getElementById(data));
}}
</script>
</body>
</html>