使自定义HTML元素可在iframe中放置 [英] Make custom HTML elements droppable in iframe
问题描述
我喜欢有一个列表，其中的元素可以放入iframe的列表中，类似于此示例.我通过此线程找到了一个可行的解决方案，但在我的情况下，我需要除<li>之外的其他元素.
I like to have a list which elements can be dropped in a list in an iframe similar to this example. I found a working solution via this thread but in my case I need other elements than <li>'s.
这是我的设置:
<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 ).
It even works when changing the <ul> and <li>'s to <div> (example and iframe).
当我使用自定义标签它可以工作与<foo>和<bar>标签一起使用时，我真正需要的是使其与<modules>和<module>标签一起使用.
When I use custom tags it's working with <foo> and <bar> tags but what I really need is to get it working with <modules> and <module> tags.
<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>
这是小提琴和
Here's the fiddle and the iframe of what I actually need to work.
因此，基本上可拖动和可排序方法不适用于我的自定义html标签. <foo>，<bar>和<modules>，<module>之间有什么区别?
So basically the draggable and sortable method is not working with my custom html tags. What's so different between <foo>, <bar> and <modules>, <module>?
更新
这似乎是Webkit浏览器上的一个问题，仅是因为它在FF上可以正常工作-尚无法在Windows计算机上进行测试.
It seems this is an issue on webkit browsers only since it's working fine on FF - wasn't able to test on a Windows machine yet.
拖动元素时，它将创建一个内嵌样式"的"helper":
When dragging the element it will create a "helper" which gets some inline style:
position:absolute;left:XXXpx;right:XXXpx;width:XXXpx;heightXXXpx;z-index:1000
在Webkit上时，仅获得position，left和right:
while on webkits it only get position, left and right:
position:absolute;left:XXXpx;right:XXXpx;
推荐答案
尝试使用HTML5拖放
Try using 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>
jsfiddle http://jsfiddle.net/zo2bx4f7/
jsfiddle http://jsfiddle.net/zo2bx4f7/
这篇关于使自定义HTML元素可在iframe中放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
