Twórz niestandardowe elementy HTML z możliwością droppable w iframe

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;

Źródło

2015-10-19 Xaver

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

Spróbuj użyć HTML5 Przeciągnij i upuść

<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>

jsfidd le http://jsfiddle.net/zo2bx4f7/

Źródło

2015-10-25 04:17:51 guest271314

Tak właśnie to zrobiłem. Zajęło mi trochę czasu, aby zdobyć plusy i minusy, ale obsługa przeglądarki jest teraz całkiem niezła, a ja i tak nie muszę obsługiwać starszych. Dzięki za twój wysiłek! – Xaver

Ten sam problem pojawia się z Sortable.
Znalazłem to ze względu na długość tagu. Nie może być dłuższy niż 4 znaki łącznie.

Sprawdź tę 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>

Źródło

2015-10-28 09:56:50 misantronic

Całkiem dobrze! Ograniczenie liczby liter jest jednak dziwne. Dzięki za wkład! – Xaver

Twórz niestandardowe elementy HTML z możliwością droppable w iframe

Odpowiedz

Powiązane problemy