загрузочный столбец слева и справа и наоборот [дубликат]

В принципе вы просто insertBefore ваш элемент, который вы нажали, перед его предыдущим дочерним элементом. Однако наличие пробелов в текстовых узлах делает это более раздражающим, чем должно быть в традиционных сценариях. API-интерфейс Element Traversal API сделает это проще, но пока он не будет более широко поддерживаться в браузерах, необходимы вспомогательные функции, например: .:3d3]

  & lt; div id = "  контейнер "& GT;  & Lt; & DIV GT; 1 & Lt; / дел & GT;  & Lt; & DIV GT; 2 & Lt; / дел & GT;  & Lt; & DIV GT; 3 & л; / дел & GT;  & Lt; / дел & GT;  & lt; script type = "text / javascript" & gt;  // Привязать событие к каждой строке div // var div = firstElementChild (document.getElementById ('container'));  while (div! == null) {div.onclick = swapWithPreviousElement;  div = nextElementSibling (div);  } // Переместить элемент перед его предыдущим элементом sibling // function swapWithPreviousElement () {var previous = previousElementSibling (this);  if (previous! == null) this.parentNode.insertBefore (это, предыдущий);  } // Мы использовали некоторые API-интерфейсы Element Traversal, но некоторые // браузеры еще не поддерживают их.  Предоставьте функции обертки // для совместимости.  // function previousElementSibling (element) {if ('previousElementSibling' в элементе) return element.previousElementSibling;  do element = element.previousSibling;  while (element! == null & amp; & amp; element.nodeType! == 1);  возвратный элемент;  } function nextElementSibling (element) {if ('nextElementSibling' в элементе) return element.nextElementSibling;  do element = element.nextSibling;  while (element! == null & amp; & amp; element.nodeType! == 1);  возвратный элемент;  } function firstElementChild (element) {if ('firstElementChild' в элементе) return element.firstElementChild;  var child = element.firstChild;  while (child! == null & amp; & amp; child.nodeType! == 1) child = child.nextSibling;  возвращение ребенка;  } & lt; / script & gt;   

Обмен любыми узлами, а не братьями и сестрами, а не смежными братьями и сестрами, без временных узлов, без клонирования, без jquery ... IE9 +

  function swapNodes (n1, n2) {var p1 = n1.  ParentNode;  var p2 = n2.parentNode;  var i1, i2;  if (! p1 ||! p2 || p1.isEqualNode (n2) || p2.isEqualNode (n1)) return;  for (var i = 0; i & lt; p1.children.length; i ++) {if (p1.children [i] .isEqualNode (n1)) {i1 = i;  }} for (var i = 0; i & lt; p2.children.length; i ++) {if (p2.children [i] .isEqualNode (n2)) {i2 = i;  }} if (p1.isEqualNode (p2) & amp; i1 & lt; i2) {i2 ++;  } p1.insertBefore (n2, p1.children [i1]);  p2.insertBefore (n1, p2.children [i2]);  }  

Из звуков вы в основном просто хотите поменять div на div перед ним, ergo с previousSibling . Возможно, вы можете посмотреть на insertBefore , но вместо создания нового элемента используйте существующий. Я не уверен, что произойдет с приложенными событиями, если они будут скопированы правильно.

Свойство parentNode элемента предоставляет вам родительский узел. Элементы имеют функцию insertBefore , которая вставляет элемент перед другим ссылочным элементом (перемещая его, если он уже находится в другом месте в дереве). И узлы имеют previousSibling , который дает вам предыдущий узел-брат (который может быть или не быть элементом). Итак:

  function swapDiv (elm) {var previous = findPrevious (elm);  if (previous) {elm.parentNode.insertBefore (elm, previous);  }}  

... где findPrevious выглядит так:

  function findPrevious (elm) {do {elm = elm  .previousSibling;  } while (elm & amp; elm.nodeType! = 1);  return elm;  }  

... где ваши атрибуты onclick должны быть:

  onclick = "swapDiv (this);"   

... хотя вы можете захотеть вместо этого подключиться к событию DOM2 ( addEventListener или attachEvent в IE).

Немного OT, но могу ли я рекомендовать использовать любую из нескольких доступных библиотек, которые облегчат вашу жизнь, например Prototype , jQuery , Закрытие [ ! d2] или любой из нескольких других . На самом деле, была ошибка в более ранней версии этого, потому что это было , что давно, поскольку я имел дело с DOM напрямую. : -