Rendi gli elementi HTML personalizzati trascinabili in iframe

Mi piace avere un elenco di elementi che possono essere eliminati in un elenco in un iframe simile a this example. Ho trovato una soluzione funzionante tramite this thread ma nel mio caso ho bisogno di altri elementi oltre allo <li>.Rendi gli elementi HTML personalizzati trascinabili in iframe

Ecco la mia messa a punto:

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

e il contenuto iframe:

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

Questo funziona come si può vedere here.

funziona anche quando si cambia le <ul> e <li> 's per <div> (example e iframe).

quando uso di tag personalizzati it's working con <foo> e <bar> tag, ma quello che ho veramente bisogno è quello di farlo funzionare con <modules> e <module> tag.

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

Ecco the fiddle e la iframe di quello che ho effettivamente bisogno di lavorare.

Quindi, in pratica il metodo trascinabile e ordinabili non funziona con i miei tag HTML personalizzati. Cosa c'è di così diverso tra <foo>, <bar> e <modules>, <module>?

UPDATE

Sembra questo è un tema sul browser WebKit solo in quanto sta lavorando bene su FF - non è stato in grado di testare su una macchina Windows ancora.

Quando si trascina l'elemento creerà un "aiuto" che ottiene un po 'di stile in linea:

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

mentre su webkits solo ottenere position, left e right:

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

fonte

2015-10-19 Xaver

Si sta lavorando per me su 'https: // jsfiddle.net/8cx4pe2y/3 /', visto che il 'iframe' ha' src =/dd9wf04w/4/show/' – hjpotter92

quale browser/os?Puoi ottenere un elemento "To drop" nella lista di "Element"? – Xaver

non funziona qui: Chrome versione 46.0.2490.71 (64-bit), OSX Yosemite 10.10.5 – ggzone

Provare a utilizzare HTML5 Drag and Drop

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

fonte

2015-10-25 04:17:51 guest271314

Questo è il modo in cui l'ho fatto. Mi ci è voluto un po 'per ottenere i pro ei contro, ma il supporto del browser è abbastanza buono al giorno d'oggi e non devo comunque supportare i più vecchi. Grazie per i tuoi sforzi! – Xaver

Lo stesso problema si verifica con Sortable.
L'ho trovato a causa della lunghezza del tag. Non deve essere più lungo di 4 caratteri in totale.

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

fonte

2015-10-28 09:56:50 misantronic

Abbastanza bene! La limitazione di 4 lettere è comunque strana. Grazie per il tuo contributo! – Xaver

Rendi gli elementi HTML personalizzati trascinabili in iframe

risposta

Problemi correlati