背景：前一阶段做了一个移动页面设计器，拖拽组件、设计器界面、组件属性都在同一个界面，导致设计器(手机壳)中的页眉和页脚位置，尤其是页脚在设计器中没办法像在真正手机中，固定在页面下方。这是由于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);
}
相关推荐
"jquery 跨iframe拖拽"的核心在于利用jQuery的拖拽插件（如jQuery UI的draggable/droppable）以及DOM操作和事件处理来实现跨IFrame通信。下面我们将分步骤解析这个过程： 1. **引入jQuery和jQuery UI**：在项目中，...
分析比较了EasyUI、JQueryUI、HTML5的拖拽优缺点，并给出跨iframe拖拽的实现方案（跨iframe拖拽功能，必须将代码存放到服务器上访问才能正常拖拽，本地打开可能无法拖拽，具体原因不是很清楚）
在移动端开发中，处理iframe的缩放问题是个常见的挑战，尤其是当页面以响应式设计为基础时。响应式设计的核心在于页面能够根据不同的屏幕尺寸调整布局，以达到最佳的浏览效果。当页面中嵌入iframe时，这些iframe也...
总结来说，使用Iframe实现TAB页面切换是一种常见的网页设计手法，它结合HTML、CSS和JavaScript，可以有效地组织和展示内容。在实际应用中，结合Spring框架的Web服务，可以构建出功能丰富的交互式用户界面。
总的来说，实现“拖拽一个iframe中的div 在另一个iframe页面中显示”的功能涉及到HTML5拖放API、跨iframe通信、DOM操作等多个方面，需要对前端开发有深入的理解。在实际应用中，还需要考虑性能优化、用户体验设计等...
总的来说，"iframe实现左侧菜单右侧页面简单示例"是一个很好的教学资源，它涵盖了网页布局、iframe嵌套、CSS样式设计等基础知识，对于初学者来说，可以通过这个实例学习并掌握这些技能，为构建更复杂的Web应用打下...
当页面包含`iframe`时，我们需要额外的策略来处理这种情况，例如，在生成PDF前先将`iframe`的内容提取出来或者在`iframe`加载完成后，将其内容复制到主页面中。 其次，`jspdf`是一个轻量级的JavaScript PDF生成库，...
就想弄一个winform结合html5的一个小东西，突有心血来潮，想在里面嵌套一个微信网页版，下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法，一起看看吧
项目中的需求： ...原因：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache) 什么是bfcache？ bfcache，即back-forward cache，可称为
在网页设计中，有时我们需要实现跨页面的交互功能，例如在一个主页面中包含两个或多个iframe，让这些iframe中的元素可以被拖动并传递信息。本案例中的"主页面实现两个iframe中元素拖动"就是一个典型的跨iframe交互的...
"iframe拖动功能"指的是实现`iframe`元素可以被用户通过鼠标拖动来改变其在页面中的位置。这种功能在需要创建可自定义布局或者需要动态调整`iframe`显示区域的应用中非常实用。 要实现`iframe`拖动，我们需要借助...
要使用jQuery实现iframe页面切换，我们首先需要在HTML中设置一个iframe元素，并为其定义一个id，以便于后续的jQuery选择器能够找到它： ```html <iframe id="myIframe" src="初始页面URL"></iframe> ``` 接下来，...
在本文中，我们将深入探讨如何使用JavaScript实现一个可拖动的iframe。JavaScript是一种强大的客户端脚本语言，常用于网页交互和动态效果的实现。在这个案例中，我们将关注于利用JavaScript来增强iframe的功能，使其...
在网页开发中，有时我们需要实现在不刷新整个页面的情况下更新某些特定区域，这通常是通过`iframe`（Inline Frame）来实现的。`iframe`是一种HTML元素，它可以在一个网页中嵌入另一个网页，使得我们可以在独立的框架...
在Vue.js中实现嵌套页面通常涉及到使用`iframe`元素来加载外部网页或者内部组件。`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档，这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常...
`iframe`允许我们在一个HTML文档中嵌入另一个HTML文档，从而实现页面内容的动态切换，而不会打断用户的操作流程。 **一、iframe的基本使用** `<iframe>`标签是HTML5中的一个元素，用于在当前文档中嵌入另一个文档。...
本教程将详细讲解如何在uniapp移动端通过H5实现PDF和其他文件的在线预览功能。通过提供的源码和注解，开发者可以深入理解其实现机制，并在自己的项目中进行应用。 首先，我们需要了解uniapp的组件系统。uniapp允许...
本知识点主要介绍如何使用JS调用iframe元素来实现页面内容的打印功能。 ### 知识点一：使用iframe实现区域打印 通过创建一个iframe元素，并将其添加到文档中，可以实现在一个隔离的环境中进行打印，这样做的好处是...
- `postMessage` API：对于跨域的iframe，HTML5引入了`postMessage`和`message`事件，允许不同源的页面间通信。发送端使用`postMessage`发送数据，接收端监听`message`事件。 ```javascript // 发送端 parent....