Как исправить SCRIPT5007: невозможно получить свойство 'parentNode' с неопределенной или нулевой ссылкой в ​​Inte rnet Explorer 11?

Question

мой код работает нормально в других браузерах, но в Inte rnet Explorer 11 я получаю SCRIPT5007: Невозможно получить свойство 'parentNode' с неопределенной или нулевой ссылкой . Кто-нибудь знает, как исправить эту ошибку? Вот мой код:

var selected

function dragOver(e) {
  if (isBefore(selected, e.target)) e.target.parentNode.insertBefore(selected, e.target)
  else e.target.parentNode.insertBefore(selected, e.target.nextSibling)
}

function dragEnd() {
  selected = null
}

function dragStart(e) {
  e.dataTransfer.effectAllowed = "move"
  e.dataTransfer.setData("text/plain", null)
  selected = e.target
}

function isBefore(el1, el2) {
  var cur;
  if (el2.parentNode === el1.parentNode) {
    for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
      if (cur === el2) return true
    }
  } else return false;
}

<div class="sequence">
  <div draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="3">Yellow</div>
  <div draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="5">Red</div>
  <div draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="2">Green</div>
  <div draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="1">Blue</div>
  <div draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="4">Orange</div>
</div>

Answer 1

Я проверил ваш код, и сначала ошибка произошла в e.dataTransfer.setData("text/plain", null) с недопустимым аргументом. В этой строке две ошибки:

1. IE принимает только text и URL в качестве допустимых типов данных. Вы можете обратиться к этой статье для объяснения:

   Даже если Inte rnet Explorer начал с ввода только "text" и "URL" в качестве допустимых типов данных, HTML5 расширяет это, позволяя указывать любой тип MIME. Значения «text» и «URL» будут поддерживаться HTML5 для обратной совместимости, но они сопоставляются с «text / plain» и «text / uri-list».

2. Мы должны использовать конкретное значение в качестве данных вместо null в IE. Мы можем использовать идентификатор цели события для данных.

Таким образом, эту строку следует изменить на: e.dataTransfer.setData("text", e.target.id).

После этого нам нужно изменить ondragover события ondragenter, так как я обнаружил, что ondragover не будет запущено в IE. Таким образом, окончательный код должен быть таким, как показано ниже, который может хорошо работать в IE 11:

var selected

function dragOver(e) {
  if (isBefore(selected, e.target)) e.target.parentNode.insertBefore(selected, e.target)
  else e.target.parentNode.insertBefore(selected, e.target.nextSibling)
}

function dragEnd() {
  selected = null
}

function dragStart(e) {
  e.dataTransfer.effectAllowed = "move"
  e.dataTransfer.setData("text", e.target.id)
  selected = e.target
}

function isBefore(el1, el2) {
  var cur;
  if (el2.parentNode === el1.parentNode) {
    for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
      if (cur === el2) return true
    }
  } else return false;
}

<div class="sequence">
  <div draggable="true" ondragend="dragEnd()" ondragenter="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="3">Yellow</div>
  <div draggable="true" ondragend="dragEnd()" ondragenter="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="5">Red</div>
  <div draggable="true" ondragend="dragEnd()" ondragenter="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="2">Green</div>
  <div draggable="true" ondragend="dragEnd()" ondragenter="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="1">Blue</div>
  <div draggable="true" ondragend="dragEnd()" ondragenter="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="4">Orange</div>
</div>

Демонстрационная версия

Answer 2

Попробуйте что-то подобное в ваших обработчиках событий:

function dragOver( e ) {
  if (!e) e = window.event;
  if ( isBefore( selected, e.target ) ) e.target.parentNode.insertBefore( selected, e.target )
  else e.target.parentNode.insertBefore( selected, e.target.nextSibling )
}

Ссылка: https://docstore.mik.ua/orelly/webprog/jscript/ch19_03.htm (19.3.2. Объект события IE как глобальная переменная)