Мне нравится иметь список, элементы которого можно отбросить в списке в 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;