Сделать пользовательские элементы HTML недоступными в iframe

Мне нравится иметь список, элементы которого можно отбросить в списке в iframe, подобном в этом примере. Я нашел рабочее решение через этот поток, но в моем случае мне нужны другие элементы, кроме <li>.

Здесь моя настройка:

<div id="container">
    <ul>
        <li>To drop 1</li>
        <li>To drop 2</li>
    </ul>
</div>
<iframe id="frame" src=""></iframe>

и содержимое iframe:

<ul id="sortable">
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
</ul>

Это работает, как вы можете видеть здесь.

Он работает даже при изменении <ul> и <li> до <div> (пример и iframe).

Когда я использую пользовательские теги он работает с тегами <foo> и <bar>, но мне действительно нужно, чтобы он работал с <modules> и <module>.

<foo id="sortable">  //WORKS!!
    <bar>Element</bar>
    <bar>Element</bar>
    <bar>Element</bar>
</foo>

<modules id="sortable"> //DOESN'T WORK!!
    <module>Element</module>
    <module>Element</module>
    <module>Element</module>
</modules>

Здесь скрипта и iframe что я действительно должен работать.

Таким образом, метод перетаскиваемый и сортируемый не работает с моими пользовательскими тегами html. Что так отличается между <foo>, <bar> и <modules>, <module>?

UPDATE

Кажется, что это проблема в браузерах webkit только с тех пор, как он отлично работает на FF - пока не удалось проверить на машине Windows.

При перетаскивании элемента он создаст "помощник", который получит некоторый встроенный стиль:

position:absolute;left:XXXpx;right:XXXpx;width:XXXpx;heightXXXpx;z-index:1000

а на веб-страницах он получает только position, left и right:

position:absolute;left:XXXpx;right:XXXpx;

Ответ 1

Попробуйте использовать перетаскивание HTML5

<script id="dnd">
  function over(e) {
    e.preventDefault();
  }

  function drag(e) {
    e.dataTransfer.setData("text", e.target.dataset.id);
  }

  function drop(e) {
    e.preventDefault();
    var data = e.dataTransfer.getData("text");
    e.target.appendChild(
      parent.document.querySelector("[data-id='" + data + "']")
    );
  }

  window.onload = function() {
    var mods = document.querySelector("modules");    
    var script = document.getElementById("dnd");   
    var iframe = document.querySelector("iframe");
    iframe.src = URL.createObjectURL(
      new Blob(
        ["<!doctype html>" + script.outerHTML + mods.outerHTML]
        , {"type": "text/html"}
      )
    );
  }
</script>
<div id="container">
  <ul>
    <li data-id="1" ondragstart="drag(event)" draggable="true">To drop 1</li>
    <li data-id="2" ondragstart="drag(event)" draggable="true">To drop 2</li>
  </ul>
</div>
<modules ondrop="drop(event)" ondragover="over(event)">
  <module>Element</module>
  <module>Element</module>
  <module>Element</module>
  <style>
    module, li {
      border:1px solid #000;
      display:block;
      list-style:none;
      margin:0;
      padding:5px;
    }
  </style>
</modules>
<iframe src=""></iframe>

jsfiddle http://jsfiddle.net/zo2bx4f7/

Ответ 2

Эта же проблема появляется с Sortable.
Я обнаружил, что это из-за длины тега. Это не должно быть больше четырех символов.

Проверьте fiddle:

Sortable.create(document.getElementById('sortable-1'), {});
Sortable.create(document.getElementById('sortable-2'), {});
Sortable.create(document.getElementById('sortable-3'), {});
Sortable.create(document.getElementById('sortable-4'), {});

foo,
modu, modul, modules {
    display: block;
}

foo > bar,
modu > module,
modul > module,
modules > module {
    display: block;
    padding: 10px;
    border: 1px solid blue;
    margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>

<foo id="sortable-1">
    <bar>foo 1</bar>
    <bar>foo 2</bar>
    <bar>foo 3</bar>
</foo>

<br/><br/>

<modu id="sortable-2">
    <module>modu 1</module>
    <module>modu 2</module>
    <module>modu 3</module>
</modu>

<br/><br/>

<modul id="sortable-3">
    <module>modul 1</module>
    <module>modul 2</module>
    <module>modul 3</module>
</modul>

<br/><br/>

<modules id="sortable-4">
    <module>modules 1</module>
    <module>modules 2</module>
    <module>modules 3</module>
</modules>