背景：前一阶段做了一个移动页面设计器，拖拽组件、设计器界面、组件属性都在同一个界面，导致设计器(手机壳)中的页眉和页脚位置，尤其是页脚在设计器中没办法像在真正手机中，固定在页面下方。这是由于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);
}
已为社区贡献1条内容
所有评论(0)