背景：前一阶段做了一个移动页面设计器，拖拽组件、设计器界面、组件属性都在同一个界面，导致设计器(手机壳)中的页眉和页脚位置，尤其是页脚在设计器中没办法像在真正手机中，固定在页面下方。这是由于jqm把整个页面当成了一个容器，如果页眉页脚fixed，那么页眉页脚就会跑到整个页面的最上方和最下方，而不是在设计器中，所以只能把设计器(手机壳)部分改成iframe，这样，把一个jqm完整的页面结构放入其中，页眉页脚就显示正确了。因为这个设计器是通过拖拽组件的方式生成页面，所以就出现了跨iframe的拖拽。
功能：拖拽组件生成对应组件的代码，并且可以在iframe这个容器中拖动组件进行排序。
技术：jquery 1.10,jquery-ui 1.11,html5
抛砖引玉：因为这是公司的项目，我在此只抛砖引玉，做一个小例子，页面比较丑，但是功能是实现了。现公司项目，我就不放我们的设计器界面了，我找一个别人网站的设计器的图挂上来，能更明白移动端设计器。
此设计器网站：猛戳
废话少说，show me the code!
主页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页面</title>
<style>
.component {border:solid #000000;width:100px;height:30px;}
</style>
</head>
<body>
<ul class="cpList">
<li id="input_type" title="文本输入框" class="component">
<div class="cpIcon"></div>
<p>文本输入框</p>
</li>
<li id="label_type" title="文本" class="component">
<div class="cpIcon"></div>
<p>文本</p>
</li>
</ul>
<iframe id="frame" name="frame" src="frame.html" style="margin:10px auto;display:block;border:solid 1;"></iframe>
</body>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(function(){
//可拖拽组件初始化
$('.cpList li').each(function(){
$(this).attr("draggable","true");
});
})
</script>
</html>
iframe页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="jquery-ui.css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script src="draggable.js" type="text/javascript"></script>
<style>
.liClass {border:solid #000000;width:180px;height:30px;}
.tab {min-height:100px;}
</style>
</head>
<body>
<ul class="tab">
<li class="liClass"><label>aaaaaaa</label></li>
</ul>
</body>
<script>
$(function(){
$(".cpList", parent.document).find("li").each(function() {
$(this).on("dragstart", function(ev) {//开始拖拽
var dt = ev.originalEvent.dataTransfer;
dt.setData('Text', ev.target.id);//将拖拽组件ID传入
});
});
//拖拽组件
Draggable({destId:".tab",dragTag:"li"});
})
</script>
</html>
draggable.js代码：
function Draggable(options){
var options = options||{};
var tag = options.dragTag||"LI";//目前只支持li
tag = tag.toUpperCase();
var $dest = $(options.destId);//拖拽放入的容器对象
$dest.on("dragover", function(ev) {
ev.preventDefault();
});
$dest.on("drop", function(ev) {
ev.preventDefault();
var df = ev.originalEvent.dataTransfer;
var data = df.getData("Text");
var el = ev.target;//目标对象
var ctx = $(this).get(0);//当前容器
if (data==""){
return false;
}
do {
var litem = document.createElement('li');
var item = $(litem);
var html = "";
if (data=='input_type'){
html = "<input type='text' readonly value='test' />";
}else if (data=='label_type'){
html = "<label>测试文本</label>";
}
$(item).addClass("liClass");
$(item).html(html);
if ($(this).children().length>0){//当前容器下有li
if(tag === '' || el.nodeName == tag){//当前目标对象的tagName是LI
if (el.nextElementSibling){//如果当前对象的下一个兄弟节点存在，那么就将当前拖拽的对象插入到这个兄弟节点的前面
el.parentNode.insertBefore($(item).get(0),el.nextElementSibling);
}else{//兄弟节点不存，那么直接append到容器中
ctx.appendChild($(item).get(0));
}
}
}else{//当前容器下没有li，直接append进这个容器中
ctx.appendChild($(item).get(0));
}
}
while(el !== ctx && (el = el.parentNode));//当前目标对象不是容器，那么就将当前目标对象的父级节点赋值给当前目标对象
});
$dest.sortable();//JQUERY UI sortable组件
return (function(){
})(options);
}
相关推荐
分析比较了EasyUI、JQueryUI、HTML5的拖拽优缺点，并给出跨iframe拖拽的实现方案（跨iframe拖拽功能，必须将代码存放到服务器上访问才能正常拖拽，本地打开可能无法拖拽，具体原因不是很清楚）
NULL 博文链接：https://kjah.iteye.com/blog/423384
项目中的需求： ...原因：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache) 什么是bfcache？ bfcache，即back-forward cache，可称为
就想弄一个winform结合html5的一个小东西，突有心血来潮，想在里面嵌套一个微信网页版，下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法，一起看看吧
主要介绍了iframe在移动端的缩放的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iframe实现左侧菜单右侧页面简单示例。点击左侧菜单，右侧显示不同html内容，并加有css样式，美观实用。很简单的界面，没有多余功能。
使用iframe实现点击导航页面无刷切换，使用bootstrap布局
使用iframe实现图片上传以及上传后的本页面无刷新展示。运行环境是php和jq
JQUERY实现iframe页面切换功能，轻松简单、灵活方便快速,代码实例，测试通过
主要介绍了js调用iframe实现打印页面内容的方法,需要的朋友可以参考下
主要介绍了在vue中实现嵌套页面(iframe)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
子页面访问父页面和跨iframe访问 我弄了1上午总算OK了，测试版本是在IE7版本 火狐3.016版本
图片浏览插件，支持跨iframe。 图片浏览插件，支持跨iframe。
本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下： 父页面获取子页面元素 格式： $("#iframeID").contents().find("#eleID") 示例代码： father.html <!DOCTYPE html> <...
BS页面实现Skyline平台下使用...实现popup内嵌html页面（标注输入界面），点击保存后更改标注图像，添加标注名称在鼠标悬浮在图像标注上显示名称的效果（最好把文件发布在iis上，要不然会在popup中弹出安全警告！）
NULL 博文链接：https://13813962825.iteye.com/blog/2067021
代码实现 一个主页面、 两个子页面，子页面中元素拖动传递的效果。 注意：请使用IIS或者TOMCAT 装载 ， 本地路径打开因iframe跨域限制达不到效果！
####A 简单的 JavaScript 框架（一个 JS 文件）有助于在 HTML5 页面上跨 iframe（支持跨域/来源）调用 API 和共享 JS 对象的属性。 xframe.js 正是你想要的，一个 JavaScript AMD 模块。 在您的 html 页面中使用它...