Как перемешать несколько элементов div, содержащихся в td и другом div

0

У меня 16 divs: HTML

  <table id="table1">
  <tr id="tr1">
    <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
      <div id="div_content1" draggable="true" ondragstart="drag(event)"><p id="p1">5</p></div></td>
    <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
      <div id="div_content2" draggable="true" ondragstart="drag(event)"><p id="p1">11</p></div></td>
    <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
      <div id="div_content3" draggable="true" ondragstart="drag(event)"><p id="p1">1</p></div></td>
    <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
      <div id="div_content4" draggable="true" ondragstart="drag(event)"><p id="p1">4</p></div></td>
  </tr>

  ...
  ...
  ...

  <tr id="tr4">
    <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
      <div id="div_content13" draggable="true" ondragstart="drag(event)"><p id="p1">12</p></div></td>
    <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
      <div id="div_content14" draggable="true" ondragstart="drag(event)"><p id="p1">3</p></div></td>
    <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
      <div id="div_content15" draggable="true" ondragstart="drag(event)"><p id="p1">9</p></div></td>
    <td id="divdrop" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
  </tr>
  </table>

Я попытался перетасовать их с помощью этой функции (когда страница обновляется) JS

onload = function(){
    var parent = document.getElementById('divdrag');
    var child = parent.children[1];
    var frag = document.createDocumentFragment();
    while (child.length) {
        frag.appendChild(child[Math.floor(Math.random() * child.length)]);
    }
    child.appendChild(frag);
}

Где я ошибаюсь? Взгляните на jsfiddle, потому что мне не разрешено размещать столько кода: http://jsfiddle.net/2tESd/1/ Спасибо!

  • 0
    Где ваша декларация allowDrop () и drop ()? Ваш код кажется неполным.
  • 0
    Я думал, что это не будет нужно. Однако я обновил скрипку :)
Показать ещё 2 комментария
Теги:

2 ответа

0

Добавьте в код сценария следующий код.

 function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
 ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
onload = function(){
var parent = document.getElementById('divdrag');
var child = parent.children[1];
var frag = document.createDocumentFragment();
while (child.length) {
    frag.appendChild(child[Math.floor(Math.random() * child.length)]);
}
child.appendChild(frag);
}

надеюсь, что это работает..

Поделиться
  • 0
    Я не нашел никакой разницы с моим кодом в скрипке, не так ли?
  • 0
    @getty - А ваш ответ отличается от кода ОП?
0

В общем, может быть один идентификатор с тем же именем, поэтому вы

document.getElementById('divdrag');

и вам нужно изменить их на классы

Поделиться
  • 0
    document.getElementById() не возвращает null когда есть несколько элементов указанного идентификатора. Хотя, конечно, повторные идентификаторы недействительны.
  • 0
    @nnnnnn Да, моя ошибка = (. Отредактировано.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню