html5 跨iframe的拖拽实现移动端页面设计器

     背景:前一阶段做了一个移动页面设计器,拖拽组件、设计器界面、组件属性都在同一个界面,导致设计器(手机壳)中的页眉和页脚位置,尤其是页脚在设计器中没办法像在真正手机中,固定在页面下方。这是由于jqm把整个页面当成了一个容器,如果页眉页脚fixed,那么页眉页脚就会跑到整个页面的最上方和最下方,而不是在设计器中,所以只能把设计器(手机壳)部分改成iframe,这样,把一个jqm完整的页面结构放入其中,页眉页脚就显示正确了。因为这个设计器是通过拖拽组件的方式生成页面,所以就出现了跨iframe的拖拽。

   功能:拖拽组件生成对应组件的代码,并且可以在iframe这个容器中拖动组件进行排序。

    技术:jquery 1.10,jquery-ui 1.11,html5

 

    抛砖引玉:因为这是公司的项目,我在此只抛砖引玉,做一个小例子,页面比较丑,但是功能是实现了。现公司项目,我就不放我们的设计器界面了,我找一个别人网站的设计器的图挂上来,能更明白移动端设计器。

    此设计器网站:猛戳

html5 跨iframe的拖拽实现移动端页面设计器_第1张图片

    废话少说,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);
}

 

 

 

你可能感兴趣的:(html5,页面设计器,跨iframe拖拽)