在iframe中制作自定义HTML元素可放入

我喜欢列出哪些元素可以放入iframe中的列表中，类似于this example。我通过this thread发现了一个工作解决方案，但在我的情况下，我需要的其他元素不是<li>。在iframe中制作自定义HTML元素可放入

这里是我的设置：

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

这工作，你可以看到here。

改变<ul>和<li>年代到<div>（example和iframe）时，它甚至。

当我使用自定义标签it's working与<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>

这里是the fiddle和我确实需要工作iframe。

所以基本上可拖拽和可排序方法不符合我的自定义html标记。 <foo>,<bar>和<modules>,<module>之间有什么不同？

UPDATE

看来这是唯一的，因为它的工作在FF罚款WebKit浏览器的问题 - 无法测试Windows机器上呢。

当拖动它会创建一个 “助手”，这得到了一些内嵌样式的元素：

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

同时webkits只得到position，left和right：

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

来源

2015-10-19 Xaver

这是为我工作的'的https：// jsfiddle.net/8cx4pe2y/3 /'，考虑到'iframe'有'SRC =/dd9wf04w/4/show /' – hjpotter92

哪个浏览器/ os？你能否在“元素”列表中添加“放置”元素？ – Xaver

此处不起作用：Chrome版本46.0.2490.71（64位），OSX Yosemite 10.10.5 – ggzone

尝试使用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>

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

来源

2015-10-25 04:17:51 guest271314

这是我完成它的方式。花了我一段时间来获得利弊，但现在浏览器的支持是相当不错的，无论如何我不必支持较老的浏览器。谢谢你的努力！ – Xaver

同样的问题出现在Sortable。
我发现它是因为标签的长度。它不能超过4个字符。

看看这个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>

来源

2015-10-28 09:56:50 misantronic

相当不错！ 4个字母的限制是奇怪的，但。感谢您的输入！ – Xaver

在iframe中制作自定义HTML元素可放入

回答

相关问题