Chciałbym mieć listę, które elementy można upuścić na liście w elemencie iframe podobnym do this example. Znalazłem działające rozwiązanie poprzez this thread, ale w moim przypadku potrzebuję innych elementów niż <li>
.Twórz niestandardowe elementy HTML z możliwością droppable w iframe
Oto moja konfiguracja:
<div id="container">
<ul>
<li>To drop 1</li>
<li>To drop 2</li>
</ul>
</div>
<iframe id="frame" src=""></iframe>
a zawartość iframe:
<ul id="sortable">
<li>Element</li>
<li>Element</li>
<li>Element</li>
</ul>
Działa to jak widać here.
Działa nawet przy zmianie <ul>
i <li>
„s do <div>
(example i iframe).
Kiedy używać tagów niestandardowych it's working z <foo>
i <bar>
tagów Ale to, co naprawdę potrzebne jest, aby dostać pracy z <modules>
i <module>
tagów.
<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>
Oto the fiddle i iframe z tego, co rzeczywiście trzeba pracować.
Więc w zasadzie sortable metoda przeciągany i nie pracuje z moich własnych znaczników HTML. Co tak bardzo różni się między <foo>
, <bar>
i <modules>
, <module>
?
UPDATE
Wydaje jest to problem tylko w przeglądarkach WebKit, ponieważ działa poprawnie na FF - nie była w stanie przetestować na komputerze z systemem Windows jeszcze.
Podczas przeciągania elementu stworzy "pomocy", który dostaje jakiś styl inline:
position:absolute;left:XXXpx;right:XXXpx;width:XXXpx;heightXXXpx;z-index:1000
czasu na webkits tylko dostać position
, left
i right
:
position:absolute;left:XXXpx;right:XXXpx;
Pracuje dla mnie na 'https: // jsfiddle.net/8cx4pe2y/3 /', biorąc pod uwagę, że '' src iframe' ma =/dd9wf04w/4/show/' – hjpotter92
której przeglądarki/os?Czy dostaniesz element "Upuszczenie" na listę "Elementów"? – Xaver
nie działa tutaj: Chrome w wersji 46.0.2490.71 (64-bit), OSX Yosemite 10.10.5 – ggzone