Xav*_*ver 10 html iframe jquery jquery-ui
我喜欢有一个列表,哪些元素可以放在iframe的列表中,类似于这个例子.我通过这个帖子找到了一个有效的解决方案,但在我的情况下,我需要的不是其他元素<li>.
这是我的设置:
<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>and和<li>'s 更改为<div>(example和iframe)时起作用.
当我使用自定义标签时,它正在使用<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>
所以基本上可拖动和可排序的方法不适用于我的自定义html标签.什么之间如此不同<foo>,<bar>和<modules>,<module>？
UPDATE
这似乎是webkit浏览器上的一个问题,因为它在FF上工作正常 - 还无法在Windows机器上进行测试.
拖动元素时,它将创建一个"帮助器",它获得一些内联样式:
position:absolute;left:XXXpx;right:XXXpx;width:XXXpx;heightXXXpx;z-index:1000
在webkits上它只能得到position,left并且right:
position:absolute;left:XXXpx;right:XXXpx;
尝试使用 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>
jsfiddle http://jsfiddle.net/zo2bx4f7/
| 归档时间： |
|
| 查看次数： |
709 次 |
| 最近记录： |